/* ================================
   STROOP – ΧΡΩΜΑ, ΟΧΙ ΛΕΞΗ
================================ */
.stroop-instruction{
    max-width:760px;
    margin:18px auto 22px;
    padding:20px;
    border-radius:20px;
    text-align:center;
    background:linear-gradient(135deg,#f2efff,#edf7ff);
    color:#30345f;
}
.stroop-instruction h2{margin:0 0 8px;font-size:clamp(23px,3.5vw,34px);}
.stroop-instruction p{margin:0;color:#687086;font-weight:bold;}
.stroop-word-card{
    max-width:760px;
    min-height:270px;
    margin:0 auto;
    padding:28px 20px;
    border:2px solid var(--line);
    border-radius:24px;
    background:#fff;
    box-shadow:0 12px 28px rgba(60,75,110,.10);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.stroop-word{
    font-size:clamp(55px,10vw,105px);
    line-height:1;
    font-weight:900;
    letter-spacing:.04em;
    overflow-wrap:anywhere;
}
.stroop-question{margin-top:28px;color:#697184;font-size:19px;font-weight:bold;}
.stroop-help{display:flex;justify-content:center;margin:20px 0 8px;}
.stroop-options{
    max-width:760px;
    margin:22px auto 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}
.stroop-option{
    min-height:90px;
    padding:15px;
    border:2px solid #dfe5ef;
    border-radius:17px;
    background:#fff;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:14px;
    font-size:18px;
    font-weight:900;
    text-align:left;
    transition:.15s ease;
}
.stroop-option:hover:not(:disabled),.stroop-option:focus-visible{
    border-color:#7065e8;
    box-shadow:0 0 0 4px rgba(112,101,232,.12);
    outline:none;
}
.stroop-dot{
    width:55px;
    height:55px;
    min-width:55px;
    border-radius:50%;
    border:2px solid rgba(38,50,74,.18);
}
.stroop-option.stroop-correct{border-color:#45ad68;background:#e8faef;}
.stroop-option.stroop-wrong{border-color:#df6670;background:#fff0f1;}
.stroop-option:disabled{opacity:1;}

@media(max-width:650px){
    .stroop-word-card{min-height:215px;padding:22px 12px;}
    .stroop-options{gap:10px;}
    .stroop-option{min-height:78px;padding:10px;font-size:15px;gap:9px;}
    .stroop-dot{width:43px;height:43px;min-width:43px;}
}

/* ================================
   COLORS & SHAPES
================================ */
.shape-instruction{text-align:center;margin:18px 0 8px;}
.shape-instruction h2{margin:0 0 14px;font-size:clamp(27px,4vw,42px);color:#30345f;}
.shape-options{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px;margin:28px auto 10px;}
.shape-option{min-height:230px;display:flex;align-items:center;justify-content:center;border:3px solid #dfe4ed;border-radius:22px;background:#fff;transition:.15s ease;}
.shape-option:hover:not(:disabled),.shape-option:focus-visible{border-color:#7065e8;box-shadow:0 0 0 5px rgba(112,101,232,.12);outline:none;}
.shape-option.shape-correct{border-color:#55c98b;background:#e8faef;}
.shape-option.shape-wrong{border-color:#df929a;background:#fff0f1;}
.drawn-shape{--shape-color:#2878e3;width:125px;height:125px;background:var(--shape-color);border:3px solid rgba(38,50,74,.65);}
.drawn-shape.circle{border-radius:50%;}
.drawn-shape.oval{width:150px;border-radius:50%;}
.drawn-shape.rectangle{width:160px;height:105px;}
.drawn-shape.diamond{transform:rotate(45deg);width:105px;height:105px;}
.drawn-shape.triangle{width:0;height:0;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:135px solid var(--shape-color);border-top:0;background:transparent;filter:drop-shadow(0 3px 0 rgba(38,50,74,.65));}

@media(max-width:650px){
    .shape-options{gap:12px;}
    .shape-option{min-height:175px;}
    .drawn-shape{width:92px;height:92px;}
    .drawn-shape.oval{width:112px;}
    .drawn-shape.rectangle{width:120px;height:78px;}
    .drawn-shape.diamond{width:78px;height:78px;}
    .drawn-shape.triangle{width:0;height:0;border-left-width:52px;border-right-width:52px;border-bottom-width:100px;}
}

/* ================================
   DIMENSIONAL CARD SORT
================================ */
.dccs-panel{max-width:900px;margin:auto;}
.dccs-intro{text-align:center;max-width:720px;margin:auto;}
.dccs-rule{display:inline-flex;align-items:center;gap:8px;margin:12px auto;padding:10px 17px;border-radius:999px;background:#eeeaff;color:#4d43b4;font-size:18px;font-weight:bold;}
.dccs-target-wrap{text-align:center;margin:16px auto 22px;}
.dccs-target-label{font-weight:bold;color:#646c80;margin-bottom:8px;}
.dccs-card{min-height:190px;border:3px solid #dce4ee;border-radius:22px;background:#fff;display:flex;align-items:center;justify-content:center;padding:20px;}
.dccs-target{max-width:310px;margin:auto;background:#f7f9fd;}
.dccs-choices{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px;margin:auto;}
.dccs-choices.three{grid-template-columns:repeat(3,1fr);max-width:880px;}
button.dccs-card{width:100%;transition:.15s ease;}
button.dccs-card:hover,button.dccs-card:focus-visible{border-color:#7065e8;box-shadow:0 0 0 5px rgba(112,101,232,.12);outline:none;}
button.dccs-card.correct-option:disabled,button.dccs-card.wrong-option:disabled{opacity:1;}
.dccs-phase{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:12px 0 20px;}
.dccs-phase span{padding:7px 11px;border-radius:999px;background:#edf1f7;color:#747c90;font-size:13px;font-weight:bold;}
.dccs-phase span.active{background:#7065e8;color:#fff;}
.dccs-phase span.done{background:#e8faef;color:#24764f;}

@media(max-width:650px){
    .dccs-card{min-height:145px;padding:12px;}
    .dccs-choices{gap:10px;}
    .dccs-choices.three{grid-template-columns:1fr;}
}

/* ================================
   MEMORY CARDS
================================ */
.memory-panel{max-width:900px;margin:auto;}
.memory-top{text-align:center;margin-bottom:20px;}
.memory-top h2{font-size:clamp(25px,4vw,38px);margin:8px 0;}
.memory-levels{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:14px 0;}
.memory-level-dot{min-width:42px;padding:7px 10px;border-radius:999px;background:#edf1f7;color:#737b90;font-weight:bold;}
.memory-level-dot.active{background:#7065e8;color:#fff;}
.memory-level-dot.done{background:#e8faef;color:#24764f;}
.memory-board{display:grid;grid-template-columns:repeat(var(--memory-cols),minmax(82px,1fr));gap:13px;max-width:820px;margin:22px auto;}
.memory-card{aspect-ratio:3/4;min-height:105px;border:0;border-radius:17px;background:linear-gradient(145deg,#7065e8,#988df4);box-shadow:0 5px 13px rgba(58,50,130,.18);position:relative;transform-style:preserve-3d;transition:transform .28s ease;}
.memory-card.flipped,.memory-card.matched{transform:rotateY(180deg);}
.memory-card.matched{box-shadow:0 0 0 4px #55c98b;}
.memory-card.matched:disabled{opacity:1;cursor:default;}
.memory-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:17px;backface-visibility:hidden;}
.memory-back{color:#fff;font-size:38px;font-weight:bold;}
.memory-front{transform:rotateY(180deg);background:#fff;border:2px solid #dfe4ed;font-size:clamp(90px,8vw,145px);}
.memory-status{text-align:center;min-height:32px;font-weight:bold;color:#5d657a;}
.memory-complete{text-align:center;padding:20px;border-radius:18px;background:#e8faef;color:#24764f;margin-top:18px;}

@media(max-width:650px){
    .memory-board{gap:8px;grid-template-columns:repeat(var(--memory-mobile-cols),1fr);}
    .memory-card{min-height:82px;border-radius:13px;}
    .memory-face{border-radius:13px;}
    .memory-back{font-size:28px;}
    .memory-front{font-size:clamp(52px,15vw,78px);}
}

/* ================================
   CORSI SEQUENCE MEMORY
================================ */
.corsi-panel{max-width:920px;margin:auto;}
.corsi-intro{text-align:center;max-width:680px;margin:0 auto 18px;}
.corsi-board{position:relative;max-width:760px;height:520px;margin:20px auto;border-radius:24px;background:#eef5fb;border:2px solid #d7e3ee;overflow:hidden;}
.corsi-block{position:absolute;width:112px;height:92px;border:3px solid #3e4a65;border-radius:15px;background:#7065e8;color:#fff;font-size:25px;font-weight:bold;box-shadow:0 5px 12px rgba(40,48,90,.16);transition:.16s ease;}
.corsi-block.showing{background:#ffc857;color:#31384d;transform:scale(1.1);box-shadow:0 0 0 7px rgba(255,200,87,.27);}
.corsi-block.selected{background:#55b5f7;transform:scale(1.05);}
.corsi-block:disabled{opacity:1;cursor:default;}
.corsi-status{text-align:center;min-height:54px;padding:12px;border-radius:14px;background:#f5f8fc;color:#50596f;font-weight:bold;}
.corsi-board .b0{left:5%;top:8%;}.corsi-board .b1{left:40%;top:5%;}.corsi-board .b2{right:6%;top:12%;}
.corsi-board .b3{left:18%;top:37%;}.corsi-board .b4{left:48%;top:31%;}.corsi-board .b5{right:8%;top:45%;}
.corsi-board .b6{left:6%;bottom:7%;}.corsi-board .b7{left:39%;bottom:10%;}.corsi-board .b8{right:18%;bottom:5%;}

@media(max-width:650px){
    .corsi-board{height:430px;}
    .corsi-block{width:76px;height:67px;font-size:20px;}
    .corsi-board .b0{left:3%;}.corsi-board .b2{right:3%;}
    .corsi-board .b3{left:10%;}.corsi-board .b5{right:3%;}
    .corsi-board .b6{left:3%;}.corsi-board .b8{right:8%;}
}



/* ================================
   WORD MATCHING
================================ */

.matching-board{
    max-width:760px;
    margin:28px auto 10px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
}

.matching-column{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.matching-title{
    text-align:center;
    font-size:14px;
    font-weight:bold;
    color:#7b8194;
    margin-bottom:3px;
}

.match-word{
    min-height:62px;
    width:100%;
    padding:14px 16px;
    border:2px solid #dfe4ed;
    border-radius:15px;
    background:#ffffff;
    color:#30345f;
    font-size:19px;
    font-weight:bold;
    transition:.15s ease;
}

.match-word:hover:not(:disabled){
    transform:translateY(-1px);
    border-color:#9c93ea;
    background:#f6f3ff;
}

.match-word.english-selected{
    border-color:#7065e8;
    background:#eeeaff;
    box-shadow:0 0 0 4px rgba(112,101,232,.10);
}

.match-word.matched{
    border-color:#55c98b;
    background:#e8faef;
    color:#24764f;
    opacity:1;
}

.match-word.wrong-match{
    border-color:#df6670;
    background:#fff0f1;
    color:#a53e49;
}

.match-help{
    text-align:center;
    color:#73798a;
    font-size:14px;
    margin-top:8px;
}

@media(max-width:650px){
    .matching-board{
        grid-template-columns:1fr;
        gap:18px;
    }
}

/* ================================
   BREAK
================================ */

.break-box{

    margin-top:24px;

    padding:14px;

    border-radius:14px;

    border:
    1px dashed #e7c45e;

    background:#fff8df;

    color:#7b682c;

    text-align:center;

    font-size:13px;

}


/* ================================
   FINISH SCREEN
================================ */

.finish-card{

    text-align:center;

    padding:45px 30px;

}


.finish-star{

    font-size:85px;

    animation:
    starPop .6s ease;

}


@keyframes starPop{

    0%{
        transform:scale(.4);
    }

    70%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
    }

}


.finish-card h2{

    font-size:36px;

    color:#3c3d71;

    margin:
    15px 0 10px;

}


.finish-card p{

    color:#70788c;

    font-size:19px;

    line-height:1.7;

}


.session-badge{

    display:inline-block;

    margin:
    12px 0 20px;

    padding:
    10px 18px;

    border-radius:999px;

    background:#e8faef;

    color:#258257;

    font-weight:bold;

}


body.large-text{
    font-size:18px;
}


body.large-text .instruction{
    font-size:21px;
}




/* =========================================================
   ΒΡΕΣ ΤΗΝ ΙΔΙΑ ΕΙΚΟΝΑ
========================================================= */

.picture-match-panel{
    max-width:1050px;
    margin:0 auto;
}

.picture-match-intro,
.picture-match-finish{
    text-align:center;
}

.picture-match-demo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin:8px auto 22px;
    font-size:clamp(48px,8vw,78px);
}

.picture-match-demo strong{
    color:#6759e6;
    font-size:36px;
}

.picture-match-levels{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin:25px 0;
}

.picture-match-levels button{
    min-height:125px;
    padding:18px 12px;
    border:2px solid #d8e1ee;
    border-radius:18px;
    background:#fff;
    color:#26375b;
    cursor:pointer;
}

.picture-match-levels button:hover,
.picture-match-levels button:focus-visible{
    border-color:#6759e6;
    background:#f7f5ff;
    outline:3px solid rgba(103,89,230,.18);
    outline-offset:2px;
}

.picture-match-levels strong,
.picture-match-levels span{
    display:block;
}

.picture-match-levels strong{
    min-height:35px;
    color:#6759e6;
    letter-spacing:5px;
}

.picture-match-levels span{
    margin-top:12px;
    font-size:19px;
    font-weight:850;
}

.picture-match-note{
    color:#69758b;
    font-size:14px;
}

.picture-match-topline{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    color:#66738c;
}

.picture-match-topline span{
    padding:7px 12px;
    border-radius:999px;
    background:#efedff;
    color:#5749c8;
    font-weight:800;
}

.picture-match-instruction{
    margin:8px 0 12px;
    text-align:center;
    color:#26375b;
    font-size:clamp(24px,4vw,34px);
    font-weight:900;
}

.picture-match-listen{
    display:block;
    margin:0 auto 20px;
    min-height:46px;
}

.picture-match-target{
    display:flex;
    align-items:center;
    justify-content:center;
    width:min(190px,55vw);
    aspect-ratio:1;
    margin:0 auto 28px;
    border:5px solid #6759e6;
    border-radius:28px;
    background:linear-gradient(145deg,#fff,#f2efff);
    box-shadow:0 10px 25px rgba(72,59,160,.12);
}

.picture-match-target span{
    font-size:clamp(76px,13vw,120px);
    line-height:1;
}

.picture-match-choices{
    display:grid;
    grid-template-columns:repeat(3,minmax(120px,1fr));
    gap:16px;
    max-width:780px;
    margin:0 auto;
}

.picture-match-choices--2{
    grid-template-columns:repeat(2,minmax(150px,240px));
    justify-content:center;
}

.picture-match-choices--4{
    grid-template-columns:repeat(2,minmax(150px,240px));
    justify-content:center;
}

.picture-match-choice{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:155px;
    padding:12px;
    border:4px solid #d8e1ee;
    border-radius:24px;
    background:#fff;
    cursor:pointer;
    transition:transform .15s,border-color .15s,background .15s;
}

.picture-match-choice span{
    font-size:clamp(62px,10vw,96px);
    line-height:1;
}

.picture-match-choice:hover,
.picture-match-choice:focus-visible{
    transform:translateY(-2px);
    border-color:#6759e6;
    outline:3px solid rgba(103,89,230,.18);
    outline-offset:2px;
}

.picture-match-choice.correct{
    border-color:#38ad6c;
    background:#eaf9f0;
}

.picture-match-choice.wrong{
    border-color:#df6872;
    background:#fff0f1;
}

.picture-match-choice:disabled{
    cursor:default;
    opacity:1;
}

.picture-match-feedback{
    min-height:62px;
    margin:18px auto 0;
    padding:14px;
    border-radius:15px;
    text-align:center;
    font-size:19px;
    font-weight:850;
}

.picture-match-feedback.correct{
    background:#eaf9f0;
    color:#23784c;
}

.picture-match-feedback.gentle{
    background:#fff7dc;
    color:#7b621b;
}

.picture-match-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:18px;
}

.picture-match-actions button{
    min-height:46px;
}

.picture-match-finish>div:first-child{
    font-size:88px;
}

@media(max-width:700px){
    .picture-match-levels{
        grid-template-columns:1fr;
    }

    .picture-match-levels button{
        min-height:95px;
    }

    .picture-match-topline{
        align-items:flex-start;
        flex-direction:column;
    }

    .picture-match-choices,
    .picture-match-choices--2,
    .picture-match-choices--4{
        grid-template-columns:repeat(2,minmax(110px,1fr));
    }

    .picture-match-choice{
        min-height:125px;
    }
}

@media(max-width:390px){
    .picture-match-choices,
    .picture-match-choices--2,
    .picture-match-choices--4{
        gap:9px;
    }

    .picture-match-choice{
        min-height:108px;
        border-radius:18px;
    }
}

@media(prefers-reduced-motion:reduce){
    .picture-match-choice{
        transition:none;
    }
}



.where-panel {
    --where-purple: #6555e8;
    --where-purple-soft: #f2efff;
    --where-blue: #1685c0;
    --where-green: #259b63;
    --where-border: #d8e2f0;
    --where-text: #14264a;
}

.where-panel .exercise-card {
    max-width: 1050px;
    margin: 0 auto;
}

.where-intro {
    text-align: center;
    padding: 18px 12px 8px;
}

.where-intro h2 {
    margin: 8px 0 10px;
    color: var(--where-text);
    font-size: clamp(1.65rem, 4vw, 2.35rem);
}

.where-intro p,
.where-note {
    color: #5d6d89;
    line-height: 1.55;
}

.where-demo-icon {
    font-size: clamp(3rem, 8vw, 5rem);
}

.where-levels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 18px;
}

.where-level {
    min-height: 150px;
    padding: 20px 14px;
    border: 2px solid var(--where-border);
    border-radius: 22px;
    background: #fff;
    color: var(--where-text);
    cursor: pointer;
    font: inherit;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.where-level:hover,
.where-level:focus-visible {
    transform: translateY(-3px);
    border-color: var(--where-purple);
    box-shadow: 0 12px 28px rgba(60, 72, 130, .13);
    outline: none;
}

.where-level strong {
    display: block;
    margin: 12px 0 6px;
    font-size: 1.25rem;
}

.where-level span {
    color: #66758f;
}

.where-demo-badge,
.where-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--where-purple-soft);
    color: #5544d7;
    font-weight: 800;
}

.where-demo-badge {
    padding: 7px 14px;
}

.where-key {
    width: 28px;
    height: 28px;
    margin: 2px;
}

.where-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    color: #64738d;
    font-weight: 700;
}

.where-instruction {
    text-align: center;
    color: var(--where-text);
}

.where-instruction h2 {
    margin: 8px 0;
    font-size: clamp(1.5rem, 4vw, 2.15rem);
}

.where-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    margin: 18px auto;
    border: 4px solid var(--where-purple);
    border-radius: 28px;
    background: var(--where-purple-soft);
    font-size: clamp(3.5rem, 9vw, 5rem);
    box-shadow: 0 10px 24px rgba(89, 72, 210, .13);
}

.where-boxes,
.where-demo-boxes {
    display: grid;
    grid-template-columns: repeat(var(--where-columns, 3), minmax(100px, 180px));
    justify-content: center;
    gap: clamp(12px, 2.5vw, 24px);
    margin: 28px auto;
}

.where-box,
.where-demo-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    min-height: 125px;
    overflow: hidden;
    border: 3px solid #cbd8e9;
    border-radius: 24px;
    background: linear-gradient(180deg, #f9fbff, #eef3fa);
    box-shadow: 0 8px 0 #cbd8e9;
    color: var(--where-text);
}

button.where-box {
    cursor: pointer;
    font: inherit;
    touch-action: manipulation;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

button.where-box:not(:disabled):hover,
button.where-box:not(:disabled):focus-visible {
    transform: translateY(-3px);
    border-color: var(--where-purple);
    outline: none;
}

.where-lid {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #7868ee, #5544d7);
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 4rem);
    font-weight: 900;
    transition: transform .4s ease, opacity .35s ease;
    z-index: 2;
}

.where-hidden-symbol {
    font-size: clamp(3rem, 7vw, 4.5rem);
}

.where-box.open .where-lid,
.where-demo-box.open .where-lid {
    transform: translateY(-105%);
    opacity: 0;
}

.where-box.correct,
.where-demo-box.correct {
    border-color: var(--where-green);
    background: #eaf9f1;
    box-shadow: 0 8px 0 #9bd8ba;
}

.where-box.wrong {
    border-color: #e19a9a;
    background: #fff4f4;
    animation: where-shake .28s ease;
}

.where-feedback {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    margin: 18px 0;
    border-radius: 16px;
    background: #f4f7fb;
    color: #50617e;
    text-align: center;
    font-weight: 800;
}

.where-feedback.success {
    background: #e7f8ef;
    color: #137848;
}

.where-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
}

.where-actions button {
    min-height: 48px;
    padding: 10px 18px;
    border: 1px solid #cfdbee;
    border-radius: 12px;
    background: #fff;
    color: var(--where-text);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.where-actions button.primary {
    border-color: var(--where-purple);
    background: var(--where-purple);
    color: #fff;
}

.where-actions button:disabled {
    cursor: default;
    opacity: .45;
}

.where-demo-card,
.where-finish {
    max-width: 760px;
    margin: 20px auto;
    padding: clamp(18px, 4vw, 32px);
    border: 2px solid var(--where-border);
    border-radius: 24px;
    background: #fff;
    text-align: center;
}

.where-demo-message {
    min-height: 32px;
    color: #53637d;
    font-weight: 800;
}

.where-finish .where-demo-icon {
    margin-bottom: 10px;
}

@keyframes where-shake {
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@media (max-width: 760px) {
    .where-levels {
        grid-template-columns: 1fr;
    }

    .where-level {
        min-height: 112px;
    }

    .where-boxes,
    .where-demo-boxes {
        grid-template-columns: repeat(2, minmax(105px, 165px));
    }

    .where-topline {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .where-level,
    .where-box,
    .where-lid {
        transition: none;
    }

    .where-box.wrong {
        animation: none;
    }
}


/* =========================================================
   ΒΡΕΣ ΟΛΑ ΤΑ ΙΔΙΑ — find-all-matching.js
   ========================================================= */

.fam-panel{--fam-purple:#6555e8;--fam-green:#279b62;--fam-line:#d8e2ef;--fam-ink:#102348;--fam-muted:#667590}
.fam-panel .exercise-card{max-width:1050px;margin:0 auto}
.fam-level-card,.fam-finish{text-align:center;padding:clamp(22px,4vw,40px)}
.fam-level-card h2,.fam-finish h2{margin:8px 0 10px;color:var(--fam-ink);font-size:clamp(1.8rem,4vw,2.5rem)}
.fam-level-card>p,.fam-finish p{color:var(--fam-muted);line-height:1.55}
.fam-hero{font-size:clamp(3.2rem,8vw,5rem);letter-spacing:.08em}
.fam-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 18px}
.fam-levels button{min-height:145px;padding:18px 14px;border:2px solid var(--fam-line);border-radius:22px;background:#fff;color:var(--fam-ink);cursor:pointer;font:inherit;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.fam-levels button:hover,.fam-levels button:focus-visible{transform:translateY(-3px);border-color:var(--fam-purple);box-shadow:0 12px 28px rgba(55,67,126,.12);outline:none}
.fam-levels strong,.fam-levels span,.fam-levels small{display:block}
.fam-levels strong{color:var(--fam-purple);font-size:1.35rem;letter-spacing:.15em}
.fam-levels span{margin:10px 0 5px;font-size:1.2rem;font-weight:850}
.fam-levels small,.fam-note{color:#72809a}
.fam-game-card{padding:clamp(16px,3vw,30px)}
.fam-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--fam-muted);font-weight:800}
.fam-level-name{padding:6px 12px;border-radius:999px;background:#f0edff;color:#5544d7}
.fam-heading{text-align:center}
.fam-eyebrow{color:#687793;font-size:.78rem;font-weight:900;letter-spacing:.1em}
.fam-heading h2{margin:7px 0 12px;color:var(--fam-ink);font-size:clamp(1.8rem,4vw,2.7rem)}
.fam-listen{min-height:48px;padding:10px 18px;border:2px solid #83cdf4;border-radius:12px;background:#edf8ff;color:#076da8;font-weight:850;cursor:pointer}
.fam-instruction{margin:16px 0 22px;color:var(--fam-ink);font-size:clamp(1.3rem,3vw,1.9rem);font-weight:850}
.fam-grid{display:grid;gap:14px;max-width:850px;margin:0 auto}
.fam-grid-4{grid-template-columns:repeat(2,minmax(150px,1fr));max-width:580px}
.fam-grid-6,.fam-grid-9{grid-template-columns:repeat(3,minmax(150px,1fr))}
.fam-item{position:relative;display:grid;place-items:center;min-height:145px;border:3px solid var(--fam-line);border-radius:22px;background:#fff;cursor:pointer;font:inherit;touch-action:manipulation;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.fam-item span{font-size:clamp(4rem,8vw,6rem);line-height:1}
.fam-item:not(:disabled):hover,.fam-item:not(:disabled):focus-visible{transform:translateY(-2px);border-color:#9cabe0;outline:none}
.fam-item.selected{border-color:var(--fam-green);background:#edfaf3;box-shadow:0 0 0 4px rgba(39,155,98,.1)}
.fam-item.selected::after{content:"✓";position:absolute;right:10px;top:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fam-green);color:#fff;font-size:1.3rem;font-weight:900}
.fam-item.wrong{border-color:#e7a4a4;background:#fff7f7;animation:fam-shake .28s ease}
.fam-feedback{display:grid;place-items:center;min-height:52px;max-width:850px;margin:18px auto 8px;padding:10px 16px;border-radius:14px;color:#60708c;font-weight:850;text-align:center}
.fam-feedback.success{background:#e8f8ef;color:#147848}
.fam-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:850px;margin:13px auto 0}
.fam-progress{display:flex;gap:9px;flex-wrap:wrap}
.fam-dot{width:16px;height:16px;border:2px solid var(--fam-purple);border-radius:50%}
.fam-dot.done{background:var(--fam-purple)}
.fam-again{min-height:44px;padding:9px 15px;border:1px solid var(--fam-line);border-radius:11px;background:#fff;color:var(--fam-ink);font-weight:800;cursor:pointer}
.fam-finish-icon{font-size:5rem}
@keyframes fam-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:720px){.fam-levels{grid-template-columns:1fr}.fam-levels button{min-height:105px}.fam-grid-6,.fam-grid-9{grid-template-columns:repeat(2,minmax(110px,1fr))}.fam-item{min-height:120px}.fam-topline,.fam-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:420px){.fam-grid-4{grid-template-columns:repeat(2,minmax(100px,1fr))}.fam-item span{font-size:3.7rem}}
@media(prefers-reduced-motion:reduce){.fam-levels button,.fam-item{transition:none}.fam-item.wrong{animation:none}}


/* =========================================================
   ΒΡΕΣ ΤΗ ΣΩΣΤΗ ΠΟΣΟΤΗΤΑ — quantity-groups.js
   ========================================================= */

.qg-panel{--qg-purple:#6555e8;--qg-green:#279b62;--qg-line:#d8e2ef;--qg-ink:#102348;--qg-muted:#667590}
.qg-panel .exercise-card{max-width:1050px;margin:0 auto}
.qg-level-card,.qg-finish{text-align:center;padding:clamp(22px,4vw,40px)}
.qg-level-card h2,.qg-finish h2{margin:8px 0 10px;color:var(--qg-ink);font-size:clamp(1.8rem,4vw,2.5rem)}
.qg-level-card>p,.qg-finish p{color:var(--qg-muted);line-height:1.55}
.qg-hero{color:var(--qg-purple);font-size:clamp(2.5rem,7vw,4.5rem);font-weight:950;letter-spacing:.05em}
.qg-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:26px 0 18px}
.qg-levels button{min-height:145px;padding:18px 14px;border:2px solid var(--qg-line);border-radius:22px;background:#fff;color:var(--qg-ink);cursor:pointer;font:inherit;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.qg-levels button:hover,.qg-levels button:focus-visible{transform:translateY(-3px);border-color:var(--qg-purple);box-shadow:0 12px 28px rgba(55,67,126,.12);outline:none}
.qg-levels strong,.qg-levels span,.qg-levels small{display:block}
.qg-levels strong{color:var(--qg-purple);font-size:1.7rem}
.qg-levels span{margin:10px 0 5px;font-size:1.2rem;font-weight:850}
.qg-levels small,.qg-note{color:#72809a}
.qg-game-card{padding:clamp(16px,3vw,30px)}
.qg-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--qg-muted);font-weight:800}
.qg-level-name{padding:6px 12px;border-radius:999px;background:#f0edff;color:#5544d7}
.qg-heading{text-align:center}
.qg-eyebrow{color:#687793;font-size:.78rem;font-weight:900;letter-spacing:.1em}
.qg-heading h2{margin:7px 0 12px;color:var(--qg-ink);font-size:clamp(1.8rem,4vw,2.7rem)}
.qg-listen{min-height:48px;padding:10px 18px;border:2px solid #83cdf4;border-radius:12px;background:#edf8ff;color:#076da8;font-weight:850;cursor:pointer}
.qg-prompt{display:flex;align-items:center;justify-content:center;gap:14px;margin:17px 0 24px}
.qg-target{display:grid;place-items:center;width:82px;height:82px;border-radius:22px;background:#f0edff;color:var(--qg-purple);font-size:3rem;font-weight:950}
.qg-dots{color:var(--qg-purple);font-size:1.15rem;letter-spacing:.08em}
.qg-instruction{margin-top:5px;color:var(--qg-ink);font-size:clamp(1.2rem,3vw,1.75rem);font-weight:850}
.qg-grid{display:grid;gap:14px;max-width:900px;margin:0 auto}
.qg-grid-4{grid-template-columns:repeat(2,minmax(170px,1fr));max-width:620px}
.qg-grid-6,.qg-grid-9{grid-template-columns:repeat(3,minmax(170px,1fr))}
.qg-group{position:relative;display:flex;align-items:center;justify-content:center;align-content:center;flex-wrap:wrap;gap:5px;min-height:170px;padding:24px 18px;border:3px solid var(--qg-line);border-radius:22px;background:#fff;cursor:pointer;font:inherit;touch-action:manipulation;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.qg-object{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1}
.qg-group:not(:disabled):hover,.qg-group:not(:disabled):focus-visible{transform:translateY(-2px);border-color:#9cabe0;outline:none}
.qg-group.selected{border-color:var(--qg-green);background:#edfaf3;box-shadow:0 0 0 4px rgba(39,155,98,.1)}
.qg-group.selected::after{content:"✓";position:absolute;right:10px;top:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--qg-green);color:#fff;font-size:1.3rem;font-weight:900}
.qg-group.wrong{border-color:#e7a4a4;background:#fff7f7;animation:qg-shake .28s ease}
.qg-feedback{display:grid;place-items:center;min-height:52px;max-width:900px;margin:18px auto 8px;padding:10px 16px;border-radius:14px;color:#60708c;font-weight:850;text-align:center}
.qg-feedback.success{background:#e8f8ef;color:#147848}
.qg-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:900px;margin:12px auto 0}
.qg-progress{color:var(--qg-muted);font-weight:800}
.qg-actions{display:flex;gap:10px}
.qg-again,.qg-next{min-height:46px;padding:10px 17px;border-radius:11px;font-weight:850;cursor:pointer}
.qg-again{border:1px solid var(--qg-line);background:#fff;color:var(--qg-ink)}
.qg-next{border:0;background:var(--qg-purple);color:#fff}
.qg-next:disabled{opacity:.42;cursor:default}
.qg-finish-icon{font-size:5rem}
@keyframes qg-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:720px){.qg-levels{grid-template-columns:1fr}.qg-levels button{min-height:105px}.qg-grid-6,.qg-grid-9{grid-template-columns:repeat(2,minmax(110px,1fr))}.qg-group{min-height:145px}.qg-topline,.qg-footer{align-items:flex-start;flex-direction:column}.qg-object{font-size:2.4rem}}
@media(max-width:420px){.qg-grid-4{grid-template-columns:repeat(2,minmax(100px,1fr))}.qg-prompt{align-items:flex-start}.qg-target{width:70px;height:70px;font-size:2.5rem}}
@media(prefers-reduced-motion:reduce){.qg-levels button,.qg-group{transition:none}.qg-group.wrong{animation:none}}