#shuffleMessage{
display:none;
text-align:center;
font-size:18px;
font-weight:600;
padding:14px;
margin-bottom:20px;
background:#f3f6fa;
border:1px solid #d8e3f0;
border-radius:8px;
color:#03529c;
}

#mq-quiz-wrapper {
    --primary: #03529c;
    --accent: #eca373;
    --bg: #f4f4f4;
    --white: #ffffff;
    --action: #007bff;
    --success: #28a745;
    --danger: #dc3545;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg);
    padding: 20px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
}

#mq-quiz-wrapper * {
    box-sizing:border-box;
}

/* STARTSKJERM */

#mq-quiz-wrapper .controls {
    background:var(--white);
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    display:flex;
    flex-direction:column;
    gap:20px;
    width:90vw;
    max-width:500px;
    margin-top:20px;
}

#mq-quiz-wrapper .filter-group {
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
}

#mq-quiz-wrapper label {
    font-weight:bold;
    color:var(--primary);
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* CATEGORY CHIPS */

#mq-quiz-wrapper .chip-container {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

#mq-quiz-wrapper .chip {

    padding:10px 15px;
    background:var(--white);
    border:2px solid var(--primary);
    color:var(--primary);
    border-radius:25px;
    font-size:13px;
    font-weight:bold;
    cursor:pointer;
    flex-grow:1;
    text-align:center;
}

#mq-quiz-wrapper .chip.selected {

    background:var(--primary);
    color:white;

}

/* TAG SELECT */

#mq-quiz-wrapper #tagSelect {

    padding:15px;
    font-size:16px;
    font-weight:bold;
    border-radius:12px;
    border:2px solid var(--primary);
    width:100%;
    background-color:white;
    color:var(--primary);

}

/* START BUTTON */

#mq-quiz-wrapper #startBtn {

    background:var(--accent);
    color:white;
    border:none;
    padding:18px;
    font-size:20px;
    font-weight:bold;
    border-radius:10px;
    cursor:pointer;

}

/* GAME AREA */

#mq-quiz-wrapper #gameArea {

    display:none;
    flex-direction:column;
    align-items:center;
    width:100%;

}

#mq-quiz-wrapper #quizTitle {

    text-align:center;
    font-size:1.3rem;
    background:var(--primary);
    color:white;
    text-transform:uppercase;
    letter-spacing:3px;
    margin:20px 0 0 0;
    padding:15px 20px;
    font-weight:900;
    width:90vw;
    max-width:500px;
    border-radius:15px 15px 0 0;

}

/* CARD */

#mq-quiz-wrapper .card-container {

    perspective:1200px;
    width:90vw;
    max-width:500px;
    aspect-ratio:1/1;
    margin:0 auto 20px auto;

}

#mq-quiz-wrapper .card {

    position:relative;
    width:100%;
    height:100%;
    transition:transform .6s cubic-bezier(.4,0,.2,1);
    transform-style:preserve-3d;

}

#mq-quiz-wrapper .card.flipped {

    transform:rotateY(180deg);

}

#mq-quiz-wrapper .card-front,
#mq-quiz-wrapper .card-back {

    position:absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    background:white;
    border-radius:0 0 15px 15px;
    overflow:hidden;

}

#mq-quiz-wrapper .card-back {

    transform:rotateY(180deg);

}

#mq-quiz-wrapper img {

    width:100%;
    height:100%;
    object-fit:contain;

}

/* BUTTONS */

#mq-quiz-wrapper .action-buttons {

    margin-top:10px;
    width:90vw;
    max-width:500px;

}

#mq-quiz-wrapper .primary-btn {

    background:var(--action);
    color:white;
    border:none;
    padding:18px;
    border-radius:10px;
    font-weight:bold;
    width:100%;
    font-size:20px;

}

#mq-quiz-wrapper .success-btn {

    background:var(--success);
    color:white;
    border:none;
    padding:18px;
    border-radius:10px;
    font-weight:bold;
    width:100%;
    font-size:20px;

}

#mq-quiz-wrapper .secondary-controls {

    margin-top:20px;
    display:flex;
    flex-direction:column;
    align-items:center;

}

#mq-quiz-wrapper #cardCounter {

    font-weight:bold;
    color:var(--primary);
    margin-bottom:10px;

}

#mq-quiz-wrapper .small-btn.danger {

    background:var(--danger);
    color:white;
    border:none;
    border-radius:8px;
    padding:10px 20px;

}

/* ANIMATION */

@keyframes slideNext {

    0% {transform:scale(1);opacity:1;}
    45% {transform:scale(.8);opacity:0;}
    50% {transform:scale(.8) rotateY(0);}
    100% {transform:scale(1) rotateY(0);opacity:1;}

}

#mq-quiz-wrapper .card-next-anim {

    animation:slideNext .8s cubic-bezier(.4,0,.2,1);

}

#mq-quiz-wrapper .exit-report-row{
    display:flex;
    gap:15px;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
}