/**
 * Eduplayify Game Mode: Monster Maze (متاهة الوحوش)
 * طور متاهة الوحوش الأربعة بحركة عشوائية وتحكم لمسي مستمر
 */
.monster-maze-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 4px;
    box-sizing: border-box;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.monster-maze-header {
    text-align: center;
    margin-bottom: 8px;
    width: 100%;
    max-width: 680px;
}

.monster-maze-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: var(--ink, #1f2937);
    line-height: 1.3;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.monster-maze-hint {
    margin: 0;
    font-size: 0.78rem;
    color: var(--ink-soft, #6b7280);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.monster-maze-canvas-box {
    position: relative;
    margin: 0 auto;
    border-radius: 14px;
    padding: 5px;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    cursor: pointer;
    max-width: 100%;
}

.monster-maze-canvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    background: #090e17;
    border-radius: 10px;
    touch-action: none;
}

.monster-maze-ripple {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #38bdf8;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 1;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    z-index: 10;
}
.monster-maze-ripple.active {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
}

.monster-maze-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
    max-width: 760px;
}

.monster-maze-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.monster-maze-pill-letter {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}
.monster-maze-pill.ans-A .monster-maze-pill-letter { background: #3b82f6; }
.monster-maze-pill.ans-B .monster-maze-pill-letter { background: #10b981; }
.monster-maze-pill.ans-C .monster-maze-pill-letter { background: #f59e0b; }
.monster-maze-pill.ans-D .monster-maze-pill-letter { background: #ec4899; }