/* =========================================================
   📽️ Επίπεδα των Παρουσιάσεων (js/slgame.js): γραμμή άσκησης πάνω από τη διαφάνεια, αποστολές δεξιά με 💡 η καθεμία,
   κρυμμένα κομμάτια του επεξεργαστή
   ========================================================= */
/* ◀ «Άσκηση…» ▶ ως ένα κομμάτι στο κέντρο, πάνω από τη διαφάνεια (2.85, αίτημα Θανάση) */
.slg-exbar { margin: 0; flex: none; align-self: center; max-width: 100%; z-index: 1; }   /* κάτω από τα μενού της μπάρας (z-index 3) */
.slg-exbar .tf-exinfo { flex: 0 1 auto; }
.slg-tasks { flex: none; width: 270px; overflow-x: hidden; }
.slg-tasks .tf-list { margin: 0; }
.slg-tasks .tf-list li { position: relative; padding-right: 34px; }
/* «Επόμενη άσκηση»: όχι στο μέγεθος του «Πάμε!» (.big-btn.go του theme.css, 30px) — στη στενή στήλη έσπαγε σε 3 γραμμές και έβγαινε από την οθόνη */
.slg-tasks .tf-next .big-btn.go { font-size: 18px; padding: 10px 14px; max-width: 100%; }
/* μικρό 💡 ανά αποστολή */
.slg-hbtn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 2px solid #ffe082;
  border-radius: 50%; background: #fffde7; font-size: 14px; line-height: 1; cursor: pointer; transition: transform .15s, background .15s; }
.slg-hbtn:hover { background: #fff59d; transform: translateY(-50%) scale(1.12); }
.slg-tasks .tf-list li.done .slg-hbtn { opacity: .35; }
/* Ό,τι πρέπει να πατήσει το παιδί στα βήματα της 💡 (κουμπί, μικρογραφία, διάταξη): αναβοσβήνει ώσπου να πατηθεί (2.86) */
/* 2.87 (σχόλιο Θανάση): το περίγραμμα ΜΕΣΑ στο κουμπί (outline-offset αρνητικό) και χωρίς μεγέθυνση — αλλιώς στις διατάξεις του μενού
   «έτρωγε» τον χώρο και η μικρή διαφάνεια έβγαινε έξω από αυτό */
.slg-wrap .slg-flash { position: relative; z-index: 2; outline: 3px solid #ff9800; outline-offset: -3px; animation: slg-flash .9s infinite; }
@keyframes slg-flash { 50% { outline-color: #ffcc80; background-color: #ffe0b2; } }
/* (3.05) λαβή / ↻ που αναβοσβήνει: μένει απόλυτα τοποθετημένη (το position: relative πιο πάνω θα την έριχνε μέσα στο αντικείμενο) */
.slg-no-fonts #sl-font, .slg-no-fonts #sl-size { display: none; }   /* (3.06) σχήματα: από τα γράμματα μένει μόνο το A */
.slg-wrap .sl-h.slg-flash, .slg-wrap .sl-rot.slg-flash, .slg-wrap .sl-move.slg-flash { position: absolute; z-index: 4; outline: none; border-color: #ff9800; background: #ff9800; box-shadow: 0 0 0 5px rgba(255,152,0,.45); animation: slg-handle .9s infinite; }
@keyframes slg-handle { 50% { box-shadow: 0 0 0 10px rgba(255,152,0,.2); } }
/* Λυμένη άσκηση (2.85): όλα κλειδωμένα — μπάρα, μικρογραφίες, διαφάνεια, ◀ ▶, 💡· μένει μόνο το «Επόμενη άσκηση» */
.slg-locked .sl-bar, .slg-locked .sl-thumbs, .slg-locked .sl-center, .slg-locked .slg-hbtn { pointer-events: none; }
.slg-locked .sl-bar, .slg-locked .sl-thumbs, .slg-locked .slg-exbar .tf-btn { opacity: .45; }
.slg-locked .slg-hbtn { opacity: .25; }
/* hide: 'format' = όλη η 2η μπάρα (το όνομα της παρουσίασης είναι πια στην 1η) */
.slg-no-colors .sl-c-color, .slg-no-colors .sl-c-fill, .slg-no-colors .sl-c-stroke { display: none; }   /* (3.09) 🖼️ επίπεδο 4: από τη 2η μπάρα μένουν μόνο ⬆️ ⬇️ 📋 🗑️ ☑️ */
.slg-no-format .sl-format { display: none; }
.slg-no-notes #sl-notes { display: none; }
.slg-no-thumbtools .sl-thumb .sl-thumb-tools { display: none; }   /* .sl-thumb: ισχυρότερο από το «.sl-thumb.sel .sl-thumb-tools» του slides.css (ως την 2.86 φαίνονταν στην επιλεγμένη) */
.slg-no-fill .sl-c-fill, .slg-no-fill .sl-c-stroke { display: none; }   /* γέμισμα & περίγραμμα πλαισίου κρυφά (🔤 επίπεδο 2 — ώσπου να τα διδάξει η 🖼️) */
.slg-no-addslide .sl-thumb-add { display: none; }            /* το ➕ των μικρογραφιών μόνο όταν το επίπεδο έχει το «➕ Διαφάνεια» */
/* Φακός της ξενάγησης = μικρή διαφάνεια «Τίτλος» (tour.cls = 'slg-snap'): πλαίσια με διακεκομμένο περίγραμμα, ο δρομέας γράφει μέσα τους·
   το κουτί του ονόματος της παρουσίασης πάνω δεξιά (order -1) */
.tour-snap.slg-snap .tour-page { width: 520px; min-height: 360px; padding: 14px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center; font-size: 20px; line-height: 30px; color: #2e7d32; background: linear-gradient(180deg, #bbdefb 0 70%, #9ccc65 70%); }
.tour-snap.slg-snap .tour-page > div { min-width: 260px; min-height: 30px; padding: 2px 10px; border: 2px dashed rgba(46,125,50,.45); border-radius: 6px; }
.tour-snap.slg-snap .tour-page > .tp-title { order: 0; margin-top: 60px; min-width: 380px; min-height: 48px; font-size: 34px; line-height: 44px; font-weight: 700; }
.tour-snap.slg-snap .tour-page > div:nth-child(2) { border-bottom: none; border-radius: 6px 6px 0 0; margin-bottom: -10px; }
.tour-snap.slg-snap .tour-page > div:nth-child(3) { border-top: none; border-radius: 0 0 6px 6px; }
.tour-snap.slg-snap .tour-page > div:has(.slg-tp-name) { order: -1; align-self: flex-end; margin-right: 90px; min-width: 150px; text-align: left; font-size: 16px; color: #263238; background: #fff; border: 2px solid #5c6bc0; }
@media (max-width: 1100px) { .slg-tasks { width: 220px; } }
/* Φακός του επιπέδου 2 (tour.cls = 'slg-snap2', 2.87): όπως ο αληθινός επεξεργαστής — μικρογραφίες πάνω, η διαφάνεια κάτω, και πάνω της
   το μενού «Νέα διαφάνεια» με τις αληθινές μικρογραφίες των διατάξεων. Τα βήματα = καταστάσεις της «λέξης» του βήματος
   (.tw.sel στο 1,1΄΄, .tw.on.fx-* στο 1,9΄΄ — μένουν ως το τέλος του κύκλου): fx-menu ανοίγει το μενού · fx-pick διαλέγει «Τίτλος & κείμενο»
   → νέα διαφάνεια + νέα μικρογραφία · fx-gone = μια λάθος μικρογραφία που σβήνει σιγά-σιγά (↩️).
   Μεγαλύτερος φακός με πιο καθαρό κέντρο: το μενού πρέπει να διαβάζεται ολόκληρο */
.tour-snap.slg-snap2 { width: 220px; height: 220px; -webkit-mask: radial-gradient(circle at center, #000 60%, transparent 71%); mask: radial-gradient(circle at center, #000 60%, transparent 71%); }
.tour-snap.slg-snap2 .tour-lens { -webkit-mask: radial-gradient(circle at center, transparent 52%, #000 68%); mask: radial-gradient(circle at center, transparent 52%, #000 68%); }
.tour-snap.slg-snap2 .tour-page { width: 420px; min-height: 360px; padding: 70px 20px; display: flex; flex-direction: column; align-items: center; gap: 22px;
  background: #eceff1; font-size: 14px; line-height: 18px; color: #263238; }
.tour-snap.slg-snap2 .tp-title { display: none; }
.sd2-mk { place-self: center; line-height: 0; }   /* οι «λέξεις» των βημάτων: στο κέντρο αυτού που δείχνει ο φακός */
/* μικρογραφίες */
/* grid: το σημάδι του ↩️ στο ίδιο κελί με τη λάθος μικρογραφία, ΟΧΙ μέσα της — μέσα σε στοιχείο με transform ο Chrome μετρά το offsetLeft
   από εκεί και ο φακός ξέφευγε */
.sd2-strip { display: grid; grid-template-columns: repeat(3, auto); column-gap: 8px; align-items: center; }
.sd2-cov { grid-area: 1 / 1; } .sd2-new { grid-area: 1 / 2; } .sd2-bad, .sd2-mk3 { grid-area: 1 / 3; }
.sd2-th { display: inline-grid; padding: 2px; border: 3px solid transparent; border-radius: 8px; transition: opacity .5s, transform .5s, border-color .3s; }
.sd2-th > * { grid-area: 1 / 1; }
.sd2-cov { border-color: #ff9800; }                                    /* η επιλεγμένη */
.sd2-new, .sd2-bad { opacity: 0; transform: scale(.3); }
.tour-page:has(.tw.on.fx-pick) .sd2-cov { border-color: transparent; }
.tour-page:has(.tw.on.fx-pick) .sd2-new { opacity: 1; transform: none; border-color: #ff9800; }
.tour-page:has(.tw.sel[data-fx="gone"]) .sd2-new { border-color: transparent; }
.tour-page:has(.tw.sel[data-fx="gone"]) .sd2-bad { opacity: 1; transform: none; border-color: #e53935; }
.tour-page:has(.tw.on.fx-gone) .sd2-new { border-color: transparent; }
.tour-page:has(.tw.on.fx-gone) .sd2-bad { animation: sd2-gone 2.2s ease-in forwards; border-color: #e53935; }
@keyframes sd2-gone { 0% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: scale(.55); filter: grayscale(1) blur(1px); } }
/* η διαφάνεια, με το μενού πάνω της (ίδιο κελί του grid — χωρίς position, για να μετρά σωστά το κεντράρισμα του φακού) */
.sd2-stage { display: grid; place-items: center; }
.sd2-stage > * { grid-area: 1 / 1; }
.sd2-slide { width: 196px; height: 110px; box-sizing: border-box; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.25);
  background: linear-gradient(180deg, #bbdefb, #e3f2fd 55%, #dcedc8); font-family: 'Fredoka', sans-serif; transition: opacity .4s; }
.sd2-cover { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: #2e7d32; }
.sd2-cover b { font-size: 15px; } .sd2-cover small { font-size: 11px; color: #33691e; }
.sd2-content { display: flex; flex-direction: column; gap: 5px; padding: 8px 9px; opacity: 0; }
.sd2-t, .sd2-x { border: 1px dashed rgba(46,125,50,.5); border-radius: 4px; padding: 2px 6px; }
.sd2-t { min-height: 22px; font-size: 15px; line-height: 22px; font-weight: 700; color: #2e7d32; }
.sd2-x { flex: 1; font-size: 11px; color: #90a4ae; }
.sd2-t .tw::before { content: 'Γράψε τον τίτλο'; color: #90a4ae; font-weight: 400; }   /* όπως τα κενά πλαίσια του επεξεργαστή */
.sd2-t .tw.on::before, .sd2-t .tw:has(.tw-caret)::before { content: none; }
.tour-page:has(.tw.on.fx-pick) .sd2-cover { opacity: 0; }
.tour-page:has(.tw.on.fx-pick) .sd2-content { opacity: 1; }
/* το μενού «Νέα διαφάνεια» */
.sd2-menu { padding: 6px; background: #fff; border: 2px solid #ffd54f; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.2);
  opacity: 0; transform: scale(.6) translateY(-20px); transition: opacity .35s, transform .35s; }
.sd2-mt { font-size: 10px; line-height: 13px; font-weight: 700; color: #546e7a; margin: 0 2px 4px; }
.sd2-grid { display: grid; grid-template-columns: repeat(2, 84px); gap: 4px; }
.sd2-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; border: 2px solid transparent; border-radius: 8px;
  font-size: 9.5px; line-height: 11px; font-weight: 700; color: #37474f; text-align: center; white-space: normal; }
.tour-page:has(.tw.on.fx-menu) .sd2-menu { opacity: 1; transform: none; }
.tour-page:has(.tw.sel[data-fx="pick"]) .sd2-opt.c { border-color: #ff9800; background: #fff3e0; animation: slg-flash .45s 2; }
.tour-page:has(.tw.on.fx-pick) .sd2-menu { opacity: 0; transform: scale(.6) translateY(-20px); }
/* Φακός του επιπέδου 3 (tour.cls = 'slg-snap3', 2.88): μικρογραφίες με emoji σε 4 στήλες· κάθε βήμα μετακινεί τις μικρογραφίες με
   transform (βήμα στήλης 72px = 64 + κενό 8) — τα σημάδια των βημάτων (sd3-mk) σε κελιά του grid, ΟΧΙ μέσα σε μικρογραφίες (transform → λάθος offsetLeft)
   fx-up ▲: το 🥚 ανεβαίνει πριν από την 🦋 · fx-drag: η 🦋 σέρνεται (✋) μετά την 🐛 · fx-dup 📋: αντίγραφο της 🦋 · fx-del 🗑️: το αντίγραφο σβήνει */
.tour-snap.slg-snap3 { width: 220px; height: 220px; -webkit-mask: radial-gradient(circle at center, #000 60%, transparent 71%); mask: radial-gradient(circle at center, #000 60%, transparent 71%); }
.tour-snap.slg-snap3 .tour-lens { -webkit-mask: radial-gradient(circle at center, transparent 52%, #000 68%); mask: radial-gradient(circle at center, transparent 52%, #000 68%); }
.tour-snap.slg-snap3 .tour-page { width: 460px; min-height: 300px; padding: 120px 30px; background: #eceff1; font-size: 14px; line-height: 18px; color: #263238; }
.tour-snap.slg-snap3 .tp-title { display: none; }
.sd3-strip { display: grid; grid-template-columns: repeat(4, 64px); column-gap: 8px; align-items: center; }
.sd3-th { grid-row: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 48px; border-radius: 6px;
  border: 3px solid transparent; background: linear-gradient(180deg, #bbdefb, #e3f2fd 55%, #dcedc8); box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .8s cubic-bezier(.4, 0, .2, 1), border-color .3s, box-shadow .3s, opacity .4s; }
.sd3-th b { font-size: 20px; line-height: 24px; } .sd3-th small { font-size: 8.5px; line-height: 10px; font-weight: 700; color: #33691e; }
.sd3-bf { grid-column: 1; } .sd3-egg { grid-column: 2; } .sd3-cat { grid-column: 3; } .sd3-cp { grid-column: 4; opacity: 0; transform: scale(.3); }
.sd3-mk { grid-row: 1; place-self: center; line-height: 0; }
.sd3-m0 { grid-column: 1 / 3; } .sd3-m1 { grid-column: 2 / 4; } .sd3-m2 { grid-column: 3 / 5; } .sd3-m3 { grid-column: 4; }
/* ▲: επιλεγμένο το 🥚 → ανεβαίνει μία θέση */
.tour-page:has(.tw.sel[data-fx="up"]) .sd3-egg { border-color: #ff9800; }
.tour-page:has(.tw.on.fx-up) .sd3-egg { transform: translateX(-72px); }
.tour-page:has(.tw.on.fx-up) .sd3-bf { transform: translateX(72px); }
/* σύρσιμο: η 🦋 «σηκώνεται» με το ✋ και πάει μετά την 🐛 */
.tour-page:has(.tw.sel[data-fx="drag"]) .sd3-bf { border-color: #ff9800; box-shadow: 0 6px 14px rgba(0,0,0,.35); transform: translateX(72px) translateY(-6px) scale(1.06); }
.sd3-bf::after { content: '✋'; position: absolute; right: -8px; bottom: -12px; font-size: 18px; opacity: 0; transition: opacity .3s; }
.tour-page:has(.tw.sel[data-fx="drag"]) .sd3-bf::after { opacity: 1; }
.tour-page:has(.tw.on.fx-drag) .sd3-bf { transform: translateX(144px); }
.tour-page:has(.tw.on.fx-drag) .sd3-cat { transform: translateX(-72px); }
/* 📋: αντίγραφο της 🦋 ακριβώς μετά από αυτή */
.tour-page:has(.tw.sel[data-fx="dup"]) .sd3-bf { border-color: #ff9800; }
.tour-page:has(.tw.on.fx-dup) .sd3-cp { opacity: 1; transform: none; border-color: #ff9800; }
.tour-page:has(.tw.on.fx-dup) .sd3-bf { border-color: transparent; }
/* 🗑️: το αντίγραφο σβήνει σιγά-σιγά (ίδια κίνηση με το ↩️ του επιπέδου 2) */
.tour-page:has(.tw.sel[data-fx="del"]) .sd3-cp { opacity: 1; transform: none; border-color: #e53935; }
.tour-page:has(.tw.on.fx-del) .sd3-cp { animation: sd2-gone 2.2s ease-in forwards; border-color: #e53935; }
/* Φακός του επιπέδου 4 (tour.cls = 'slg-snap4', 2.90): μικρός επεξεργαστής (▶ Παρουσίαση, μικρογραφίες, διαφάνεια) και από πάνω η «προβολή»
   (μαύρη οθόνη) στο ίδιο κελί του grid· τα σημάδια των βημάτων στο κέντρο. fx-play: η προβολή «μεγαλώνει» από τη διαφάνεια · fx-next →: η 🦋 μπαίνει
   από δεξιά · fx-prev ←: πίσω η 🐛 · fx-esc: η προβολή μικραίνει και χάνεται (πίσω στον επεξεργαστή). Στο .sel κάθε βήματος φαίνεται το πλήκτρο */
.tour-snap.slg-snap4 { width: 220px; height: 220px; -webkit-mask: radial-gradient(circle at center, #000 60%, transparent 71%); mask: radial-gradient(circle at center, #000 60%, transparent 71%); }
.tour-snap.slg-snap4 .tour-lens { -webkit-mask: radial-gradient(circle at center, transparent 52%, #000 68%); mask: radial-gradient(circle at center, transparent 52%, #000 68%); }
.tour-snap.slg-snap4 .tour-page { width: 420px; min-height: 320px; padding: 90px 100px; background: #eceff1; font-size: 12px; line-height: 14px; color: #263238; }
.tour-snap.slg-snap4 .tp-title { display: none; }
.sd4-ed { display: grid; width: 220px; height: 140px; }
.sd4-ed > * { grid-area: 1 / 1; }
.sd4-mk { place-self: center; line-height: 0; }
.sd4-bar { align-self: start; display: flex; justify-content: flex-end; padding: 3px; background: #fff; border-radius: 6px 6px 0 0; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sd4-play { padding: 2px 6px; border-radius: 5px; background: #ef6c00; color: #fff; font-weight: 700; font-size: 10px; transition: transform .3s; }
.sd4-body { align-self: end; display: flex; gap: 6px; height: 108px; padding: 4px; }
.sd4-ths { display: flex; flex-direction: column; gap: 4px; }
.sd4-ths i { width: 30px; height: 18px; border-radius: 3px; background: #cfd8dc; border: 2px solid transparent; }
.sd4-ths i.s { border-color: #ff9800; background: linear-gradient(180deg, #bbdefb, #dcedc8); }
.sd4-slide, .sd4-sl { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 5px;
  background: linear-gradient(180deg, #bbdefb, #e3f2fd 55%, #dcedc8); color: #2e7d32; }
.sd4-slide { flex: 1; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.sd4-slide b, .sd4-sl b { font-size: 26px; line-height: 32px; } .sd4-slide small, .sd4-sl small { font-weight: 700; font-size: 11px; }
.sd4-show { position: relative; overflow: hidden; border-radius: 6px; background: #000; opacity: 0; transform: translate(18px, 16px) scale(.68);
  transition: opacity .5s, transform .7s cubic-bezier(.3,.8,.3,1); }
.sd4-sl { position: absolute; inset: 14px 18px; transition: transform .6s cubic-bezier(.3,.8,.3,1), opacity .5s; }
.sd4-b { transform: translateX(110%); opacity: 0; }
.sd4-k { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%) scale(.6); padding: 0 6px; border: 1px solid #90a4ae; border-bottom-width: 3px;
  border-radius: 5px; background: #fff; font: 700 11px/16px 'Fredoka', sans-serif; color: #263238; opacity: 0; transition: opacity .25s, transform .25s; }
.tour-page:has(.tw.sel[data-fx="play"]) .sd4-play { transform: scale(1.25); box-shadow: 0 0 0 3px #ffcc80; }
.tour-page:has(.tw.on.fx-play) .sd4-show { opacity: 1; transform: none; }
.tour-page:has(.tw.sel[data-fx="next"]) .sd4-kn, .tour-page:has(.tw.sel[data-fx="prev"]) .sd4-kp, .tour-page:has(.tw.sel[data-fx="esc"]) .sd4-ke { opacity: 1; transform: translateX(-50%); }
.tour-page:has(.tw.on.fx-next) .sd4-kn, .tour-page:has(.tw.on.fx-prev) .sd4-kp { opacity: 0; }
.tour-page:has(.tw.on.fx-next) .sd4-a { transform: translateX(-110%); opacity: 0; }
.tour-page:has(.tw.on.fx-next) .sd4-b { transform: none; opacity: 1; }
.tour-page:has(.tw.on.fx-prev) .sd4-a { transform: none; opacity: 1; }
.tour-page:has(.tw.on.fx-prev) .sd4-b { transform: translateX(110%); opacity: 0; }
.tour-page:has(.tw.on.fx-esc) .sd4-show { opacity: 0; transform: translate(18px, 16px) scale(.68); }
/* Μέσα στην προβολή μιας άσκησης (2.90): λωρίδα με την επόμενη αποστολή + 💡, πάνω-πάνω· τα ◀ ✕ φαίνονται πάντα· ό,τι πρέπει να πατηθεί αναβοσβήνει */
.sl-show.slg-show .sl-show-nav { opacity: 1; }
.slg-showbar { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: min(720px, 90vw); padding: 8px 12px; border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 4px 16px rgba(0,0,0,.4);
  font: 600 16px/1.3 'Fredoka', sans-serif; color: #263238; cursor: grab; touch-action: none; user-select: none; }
.slg-showbar.drag { cursor: grabbing; box-shadow: 0 8px 26px rgba(0,0,0,.5); }
.slg-sb-grip { flex: none; font-size: 20px; line-height: 1; color: #90a4ae; }
.slg-sb-n { flex: none; min-width: 34px; padding: 2px 6px; border-radius: 10px; background: #ef6c00; color: #fff; font-weight: 700; text-align: center; font-size: 14px; }
.slg-sb-txt { flex: 1; min-width: 0; }
.slg-showbar .slg-sb-hint { position: static; transform: none; flex: none; }
.slg-showbar .slg-sb-hint:hover { transform: scale(1.12); }
.slg-sb-msg { flex-basis: 100%; padding: 6px 8px; border-radius: 8px; background: #fff3e0; color: #e65100; font-size: 15px; }
.sl-show .slg-flash { outline: 3px solid #ff9800; outline-offset: 2px; animation: slg-flash .9s infinite; }
/* Φακός του επιπέδου 5 «Όλα μαζί!» (tour.cls = 'slg-snap5', 2.93): μικρογραφίες όπως στο επίπεδο 3 (sd3-th)· fx-add ➕ εμφανίζεται το 🐙 ·
   fx-dup 📋 το αντίγραφο (🐙) · fx-up ▲ αλλάζουν θέση · fx-play ▶ η «προβολή» σκεπάζει τη λωρίδα */
.tour-snap.slg-snap5 { width: 220px; height: 220px; -webkit-mask: radial-gradient(circle at center, #000 60%, transparent 71%); mask: radial-gradient(circle at center, #000 60%, transparent 71%); }
.tour-snap.slg-snap5 .tour-lens { -webkit-mask: radial-gradient(circle at center, transparent 52%, #000 68%); mask: radial-gradient(circle at center, transparent 52%, #000 68%); }
.tour-snap.slg-snap5 .tour-page { width: 460px; min-height: 300px; padding: 120px 30px; background: #eceff1; font-size: 14px; line-height: 18px; color: #263238; }
.tour-snap.slg-snap5 .tp-title { display: none; }
.sd5-cov { grid-column: 1; } .sd5-oct { grid-column: 2; opacity: 0; transform: scale(.3); } .sd5-cp { grid-column: 3; opacity: 0; transform: scale(.3); }
.sd5-m0 { grid-column: 2; } .sd5-m1 { grid-column: 3; } .sd5-m2 { grid-column: 2 / 4; } .sd5-m3 { grid-column: 1 / 4; }
.sd5-scr { grid-row: 1; grid-column: 1 / 4; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 64px; border-radius: 6px;
  background: #000; color: #fff; opacity: 0; transform: scale(.6); transition: opacity .5s, transform .6s cubic-bezier(.3,.8,.3,1); }
.sd5-scr b { font-size: 26px; line-height: 30px; } .sd5-scr small { font-size: 10px; font-weight: 700; }
.tour-page:has(.tw.sel[data-fx="add"]) .sd5-cov, .tour-page:has(.tw.sel[data-fx="dup"]) .sd5-oct, .tour-page:has(.tw.sel[data-fx="up"]) .sd5-cp { border-color: #ff9800; }
.tour-page:has(.tw.on.fx-add) .sd5-oct { opacity: 1; transform: none; }
.tour-page:has(.tw.on.fx-dup) .sd5-cp { opacity: 1; transform: none; }
.tour-page:has(.tw.on.fx-up) .sd5-cp { transform: translateX(-72px); }
.tour-page:has(.tw.on.fx-up) .sd5-oct { transform: translateX(72px); }
.tour-page:has(.tw.on.fx-play) .sd5-scr { opacity: 1; transform: none; }
/* 🔤 Κείμενο, επίπεδο 1 (2.96): «φάντασμα» της 💡 = εκεί που πρέπει να πάει το πλαίσιο (μέσα στη διαφάνεια, σε λογικά px) */
.slg-ghost { position: absolute; z-index: 5; border: 3px dashed #ff9800; border-radius: 8px; background: rgba(255,152,0,.12); pointer-events: none; animation: slg-flash .9s infinite; }
/* Φακός του 🔤 επιπέδου 1 (tour.cls = 'slg-snapt'): μικρή διαφάνεια με 🐶 · fx-new 🔤 = εμφανίζεται πλαίσιο · ⌨️ «Σκύλος» ·
   fx-move ✥ = το πλαίσιο πάει κάτω από το 🐶 · fx-size = μεγαλώνει. Το πλαίσιο ΧΩΡΙΣ position (αλλιώς λάθος offsetLeft για τον δρομέα του φακού) */
.tour-snap.slg-snapt { width: 220px; height: 220px; -webkit-mask: radial-gradient(circle at center, #000 60%, transparent 71%); mask: radial-gradient(circle at center, #000 60%, transparent 71%); }
.tour-snap.slg-snapt .tour-lens { -webkit-mask: radial-gradient(circle at center, transparent 52%, #000 68%); mask: radial-gradient(circle at center, transparent 52%, #000 68%); }
.tour-snap.slg-snapt .tour-page { width: 420px; min-height: 320px; padding: 70px 60px; background: #eceff1; font-size: 14px; line-height: 18px; color: #263238; }
.tour-snap.slg-snapt .tp-title { display: none; }
.stx-sl { display: grid; width: 300px; height: 190px; border-radius: 8px; background: linear-gradient(180deg, #bbdefb, #e3f2fd 55%, #dcedc8); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.stx-sl > * { grid-area: 1 / 1; }
.stx-dog { place-self: start; margin: 16px 0 0 34px; font-size: 64px; line-height: 72px; }
.stx-box { place-self: start; margin: 40px 0 0 176px; min-width: 96px; height: 30px; box-sizing: border-box; padding: 0 6px; border: 2px dashed #ef6c00; border-radius: 5px; background: rgba(255,255,255,.6);
  font: 700 18px/26px 'Fredoka', sans-serif; color: #2e7d32; text-align: center; white-space: nowrap; opacity: 0; transform: scale(.4);
  transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .4s, min-width .8s, box-shadow .3s; }
.stx-box::after { content: ' ✥'; font-size: 13px; color: #ef6c00; opacity: 0; transition: opacity .3s; }
.stx-mk { place-self: start; line-height: 0; }
.stx-m0 { margin: 55px 0 0 224px; } .stx-m1 { margin: 115px 0 0 64px; } .stx-m2 { margin: 115px 0 0 92px; }
.tour-page:has(.tw.sel[data-fx="new"]) .stx-box { opacity: .5; transform: scale(.7); }
.tour-page:has(.tw.on.fx-new) .stx-box { opacity: 1; transform: none; }
/* Πέρασμα του ποντικιού πάνω σε κουμπί της ξενάγησης = πηδά σε εκείνο το βήμα χωρίς τα προηγούμενα → το πλαίσιο (με το «Σκύλος») φαίνεται ήδη */
.tour-page:has(.tw[data-fx="move"].sel, .tw[data-fx="move"].on, .tw[data-fx="size"].sel, .tw[data-fx="size"].on) .stx-box { opacity: 1; }
.tour-page:has(.tw[data-fx="move"].sel, .tw[data-fx="move"].on, .tw[data-fx="size"].sel, .tw[data-fx="size"].on) .stx-box .tw:not(.on)::after { content: 'Σκύλος'; }
.tour-page:has(.tw[data-fx="size"].sel, .tw[data-fx="size"].on) .stx-box { transform: translate(-160px, 62px); }
.tour-page:has(.tw.sel[data-fx="move"]) .stx-box { box-shadow: 0 6px 14px rgba(0,0,0,.35); transform: translateY(-4px) scale(1.05); }
.tour-page:has(.tw.sel[data-fx="move"]) .stx-box::after, .tour-page:has(.tw.on.fx-move) .stx-box::after { opacity: 1; }
.tour-page:has(.tw.on.fx-move) .stx-box { transform: translate(-160px, 62px); }
.tour-page:has(.tw.sel[data-fx="size"]) .stx-box { border-color: #ff9800; border-style: solid; }
.tour-page:has(.tw.on.fx-size) .stx-box { min-width: 150px; }
/* Φακός του 🔤 επιπέδου 2 (2.98, tour.cls = 'slg-snapf'): μικρή διαφάνεια με τίτλο + πρόταση · ▭ = επιλέγεται ΟΛΟ το πλαίσιο του τίτλου
   (διακεκομμένο, χωρίς μπλε επιλογή κειμένου) · B / 48 = όλος ο τίτλος έντονος / μεγάλος · A = μόνο η επιλεγμένη λέξη «Ολυμπία» κόκκινη */
.tour-snap.slg-snapf { width: 220px; height: 220px; -webkit-mask: radial-gradient(circle at center, #000 60%, transparent 71%); mask: radial-gradient(circle at center, #000 60%, transparent 71%); }
.tour-snap.slg-snapf .tour-lens { -webkit-mask: radial-gradient(circle at center, transparent 52%, #000 68%); mask: radial-gradient(circle at center, transparent 52%, #000 68%); }
.tour-snap.slg-snapf .tour-page { width: 420px; min-height: 320px; padding: 70px 60px; background: #eceff1; font-size: 14px; line-height: 18px; color: #263238; }
.tour-snap.slg-snapf .tp-title { display: none; }
.stf-sl { width: 240px; height: 150px; padding: 22px 8px; box-sizing: border-box; border-radius: 8px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); text-align: center; }
.stf-t { margin-bottom: 26px; font: 400 14px/1.3 'Fredoka', sans-serif; color: #212121; }
.stf-p { font: 13px/1.4 Georgia, 'Noto Serif', serif; color: #37474f; }
.stf-t .tw { transition: font-size .5s, color .4s; }
.slg-snapf .tw[data-fx="b"].sel, .slg-snapf .tw[data-fx="big"].sel { background: none; }
.slg-snapf .tw[data-fx="frame"].sel, .slg-snapf .tw.on.fx-frame,
.tour-page:has(.tw[data-fx="b"].sel, .tw[data-fx="b"].on, .tw[data-fx="big"].sel, .tw[data-fx="big"].on) .tw[data-fx="frame"] { display: inline-block; background: none; outline: 2px dashed #ef6c00; outline-offset: 5px; border-radius: 3px; }
.tour-page:has(.tw[data-fx="red"].sel, .tw.on.fx-red) .tw[data-fx="frame"] { outline-color: transparent; }
.stf-a { border-bottom: 3px solid #e53935; }

/* Φακός του 🖼️ επιπέδου 1 (tour.cls = 'slg-snapo'): μικρή διαφάνεια · fx-gal = ανοίγει η συλλογή · fx-apple = το μήλο πέφτει · fx-own = το 📁 · fx-emo = το 🎈 πέφτει */
.tour-snap.slg-snapo { width: 220px; height: 220px; -webkit-mask: radial-gradient(circle at center, #000 60%, transparent 71%); mask: radial-gradient(circle at center, #000 60%, transparent 71%); }
.tour-snap.slg-snapo .tour-lens { -webkit-mask: radial-gradient(circle at center, transparent 52%, #000 68%); mask: radial-gradient(circle at center, transparent 52%, #000 68%); }
.tour-snap.slg-snapo .tour-page { width: 420px; min-height: 320px; padding: 70px 60px; background: #eceff1; font-size: 14px; line-height: 18px; color: #263238; }
.tour-snap.slg-snapo .tp-title { display: none; }
.sox-sl { display: grid; width: 300px; height: 190px; border-radius: 8px; background: linear-gradient(180deg, #fff3e0, #ffe0b2); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.sox-sl > * { grid-area: 1 / 1; }
.sox-t { place-self: start center; margin-top: 8px; font-weight: 800; font-size: 20px; line-height: 24px; }
.sox-apple { place-self: start; margin: 60px 0 0 40px; width: 90px; height: 90px; object-fit: contain; opacity: 0; transform: translateY(-40px) scale(.6); transition: opacity .5s, transform .5s; }
.sox-emo { place-self: start; margin: 66px 0 0 170px; font-size: 62px; line-height: 72px; opacity: 0; transform: translateY(-40px) scale(.6); transition: opacity .5s, transform .5s; }
.sox-gal { place-self: start center; margin-top: 44px; display: flex; gap: 6px; padding: 8px; border-radius: 8px; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.3); opacity: 0; transition: opacity .35s; }
.sox-gal img { width: 44px; height: 44px; object-fit: contain; }
.sox-gal i { font-style: normal; font-size: 28px; line-height: 44px; }
.sox-m0 { margin: 70px 0 0 150px; } .sox-m1 { margin: 105px 0 0 85px; } .sox-m2 { margin: 75px 0 0 235px; } .sox-m3 { margin: 100px 0 0 200px; }
.tour-page:has(.tw[data-fx="gal"].sel, .tw[data-fx="gal"].on, .tw[data-fx="own"].sel) .sox-gal { opacity: 1; }
.tour-page:has(.tw[data-fx="apple"].sel) .sox-gal { opacity: 1; }
.tour-page:has(.tw.on.fx-apple) .sox-gal { opacity: 0; }
.tour-page:has(.tw[data-fx="own"].sel) .sox-gal { opacity: 1; }
.tour-page:has(.tw[data-fx="own"].sel) .sox-gal i { outline: 3px solid #ff9800; border-radius: 6px; }
.tour-page:has(.tw.on.fx-apple) .sox-apple, .tour-page:has(.tw.on.fx-emo) .sox-emo { opacity: 1; transform: none; }
/* Φακός του 🖼️ επιπέδου 2 (tour.cls = 'slg-snapz'): σε κάθε βήμα (data-k της ξενάγησης, ui.js) ο δείκτης πιάνει τη λαβή, με κινήσεις 4,2΄΄:
   0 γωνία = ο Ήλιος μεγαλώνει · 1 πλάι = οβάλ και πάλι στρογγυλός · 2 σύρσιμο = στο κέντρο με τις κόκκινες γραμμές, και η Γη στοιχίζεται με μπλε · 3 ↻ = το δέντρο 90° */
.tour-snap.slg-snapz { width: 220px; height: 220px; -webkit-mask: radial-gradient(circle at center, #000 60%, transparent 71%); mask: radial-gradient(circle at center, #000 60%, transparent 71%); }
.tour-snap.slg-snapz .tour-lens { -webkit-mask: radial-gradient(circle at center, transparent 52%, #000 68%); mask: radial-gradient(circle at center, transparent 52%, #000 68%); }
.tour-snap.slg-snapz .tour-page { width: 420px; min-height: 320px; padding: 70px 60px; background: #eceff1; font-size: 14px; line-height: 18px; color: #263238; }
.tour-snap.slg-snapz .tp-title { display: none; }
.soz-sl { display: grid; width: 300px; height: 190px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #e3f2fd, #bbdefb); box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.soz-sl > * { grid-area: 1 / 1; place-self: start; }
.soz-sl .stx-mk { opacity: 0; margin: 95px 0 0 150px; }
.soz-o { position: relative; display: block; }
.soz-sl .soz-o img { display: block; width: 100%; height: 100%; object-fit: fill; border-radius: 0; }
.soz-fr { position: absolute; inset: -3px; border: 1.5px dashed #0288d1; opacity: 0; }
.soz-fr b { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1.5px solid #0288d1; box-sizing: border-box; }
.soz-fr .nw { left: -4px; top: -4px; } .soz-fr .n { left: calc(50% - 3.5px); top: -4px; } .soz-fr .ne { right: -4px; top: -4px; }
.soz-fr .e { right: -4px; top: calc(50% - 3.5px); } .soz-fr .se { right: -4px; bottom: -4px; } .soz-fr .s { left: calc(50% - 3.5px); bottom: -4px; }
.soz-fr .sw { left: -4px; bottom: -4px; } .soz-fr .w { left: -4px; top: calc(50% - 3.5px); }
.soz-fr u { position: absolute; left: calc(50% - 4px); top: -15px; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 2px solid #ff9800; box-sizing: border-box; }
.soz-sun { margin: 62px 0 0 60px; width: 40px; height: 40px; }
.soz-earth { margin: 140px 0 0 64px; width: 36px; height: 36px; }
.soz-tree { margin: 136px 0 0 128px; width: 46px; height: 46px; }
.soz-deg { margin: 140px 0 0 196px; padding: 1px 6px; border-radius: 5px; background: #263238; color: #fff; font-weight: 800; font-size: 12px; line-height: 16px; opacity: 0; }
.soz-cur { margin: 176px 0 0 200px; transform-origin: 0 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.soz-gv, .soz-gh, .soz-gb { opacity: 0; }
.soz-gv { margin-left: 149px; width: 2px; height: 190px; background: #e53935; }
.soz-gh { margin-top: 94px; width: 300px; height: 2px; background: #e53935; }
.soz-gb { margin-top: 60px; width: 300px; height: 2px; background: #1e88e5; }
/* βήμα 0 · γωνία */
[data-k="0"] .soz-sun { animation: soz-s0 4.2s both; } [data-k="0"] .soz-sun .soz-fr { opacity: 1; } [data-k="0"] .soz-sun .se { background: #ff9800; border-color: #ff9800; }
[data-k="0"] .soz-cur { animation: soz-c0 4.2s both; }
@keyframes soz-s0 { 0%, 26% { width: 40px; height: 40px; } 60%, 100% { width: 70px; height: 70px; } }
@keyframes soz-c0 { 0% { margin: 176px 0 0 200px; } 20% { margin: 102px 0 0 100px; transform: none; } 26% { margin: 102px 0 0 100px; transform: scale(.8); } 60% { margin: 132px 0 0 130px; transform: scale(.8); } 68%, 100% { margin: 132px 0 0 130px; transform: none; } }
/* βήμα 1 · πλάι */
[data-k="1"] .soz-sun { width: 70px; height: 70px; animation: soz-s1 4.2s both; } [data-k="1"] .soz-sun .soz-fr { opacity: 1; } [data-k="1"] .soz-sun .e { background: #ff9800; border-color: #ff9800; }
[data-k="1"] .soz-cur { animation: soz-c1 4.2s both; }
@keyframes soz-s1 { 0%, 20% { width: 70px; } 48%, 60% { width: 120px; } 86%, 100% { width: 70px; } }
@keyframes soz-c1 { 0% { margin: 132px 0 0 130px; } 14% { margin: 97px 0 0 130px; transform: none; } 20% { margin: 97px 0 0 130px; transform: scale(.8); } 48%, 60% { margin: 97px 0 0 180px; transform: scale(.8); } 86% { margin: 97px 0 0 130px; transform: scale(.8); } 92%, 100% { margin: 97px 0 0 130px; transform: none; } }
/* βήμα 2 · σύρσιμο: κόκκινες γραμμές στο κέντρο, μπλε όταν η Γη στοιχιστεί με τον Ήλιο */
[data-k="2"] .soz-sun { width: 70px; height: 70px; animation: soz-s2 4.2s both; } [data-k="2"] .soz-earth { animation: soz-e2 4.2s both; }
[data-k="2"] .soz-sun .soz-fr { animation: soz-f2a 4.2s both; } [data-k="2"] .soz-earth .soz-fr { animation: soz-f2b 4.2s both; }
[data-k="2"] .soz-cur { animation: soz-c2 4.2s both; }
[data-k="2"] .soz-gv, [data-k="2"] .soz-gh { animation: soz-g2a 4.2s both; } [data-k="2"] .soz-gb { animation: soz-g2b 4.2s both; }
@keyframes soz-s2 { 0%, 14% { margin: 62px 0 0 60px; } 42%, 100% { margin: 60px 0 0 115px; } }
@keyframes soz-e2 { 0%, 58% { margin: 140px 0 0 64px; } 84%, 100% { margin: 60px 0 0 64px; } }
@keyframes soz-c2 { 0% { margin: 97px 0 0 130px; } 10% { margin: 97px 0 0 95px; transform: none; } 14% { margin: 97px 0 0 95px; transform: scale(.8); } 42% { margin: 95px 0 0 150px; transform: scale(.8); } 46% { margin: 95px 0 0 150px; transform: none; } 54% { margin: 158px 0 0 82px; transform: none; } 58% { margin: 158px 0 0 82px; transform: scale(.8); } 84% { margin: 78px 0 0 82px; transform: scale(.8); } 90%, 100% { margin: 78px 0 0 82px; transform: none; } }
@keyframes soz-f2a { 0%, 48% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes soz-f2b { 0%, 50% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes soz-g2a { 0%, 38% { opacity: 0; } 40%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes soz-g2b { 0%, 80% { opacity: 0; } 82%, 100% { opacity: 1; } }
/* βήμα 3 · ↻: το δέντρο γυρίζει 90° με το ταμπελάκι */
[data-k="3"] .soz-sun { margin: 60px 0 0 115px; width: 70px; height: 70px; } [data-k="3"] .soz-earth { margin: 60px 0 0 64px; }
[data-k="3"] .soz-tree { animation: soz-t3 4.2s both; } [data-k="3"] .soz-tree .soz-fr { animation: soz-f3 4.2s both; } [data-k="3"] .soz-deg { animation: soz-d3 4.2s both; }
[data-k="3"] .soz-cur { animation: soz-c3 4.2s both; }
@keyframes soz-t3 { 0%, 30% { transform: none; } 72%, 100% { transform: rotate(90deg); } }
@keyframes soz-f3 { 0%, 14% { opacity: 0; } 16%, 100% { opacity: 1; } }
@keyframes soz-d3 { 0%, 34% { opacity: 0; } 38%, 100% { opacity: 1; } }
@keyframes soz-c3 { 0% { margin: 78px 0 0 82px; } 24% { margin: 122px 0 0 151px; transform: none; } 30% { margin: 122px 0 0 151px; transform: scale(.8); } 51% { margin: 134px 0 0 176px; transform: scale(.8); } 72% { margin: 159px 0 0 188px; transform: scale(.8); } 80%, 100% { margin: 159px 0 0 188px; transform: none; } }
/* Φακός του 🖼️ επιπέδου 3 (στο ίδιο slg-snapz): 0 🔷 το μενού ανοίγει και μπαίνει βέλος · 1 🪣 πράσινο · 2 ▢ κόκκινο περίγραμμα και μετά χοντρό (ανοίγουν και τα πάχη) · 3 κλικ μέσα και γράψιμο */
.sos-bar { margin: 14px 0 0 66px; display: flex; gap: 6px; }
.sos-bar i { width: 34px; height: 26px; border: 1px solid #cfd8dc; border-radius: 6px; background: #fff; font-style: normal; font-size: 14px; line-height: 24px; text-align: center; }
.sos-menu, .sos-pal { margin-top: 44px; display: flex; gap: 4px; padding: 3px; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); opacity: 0; }
.sos-menu { margin-left: 66px; } .sos-pal { margin-left: 106px; }
.sos-menu i { width: 24px; height: 22px; font-style: normal; font-size: 15px; line-height: 22px; text-align: center; }
.sos-pal i { width: 22px; height: 22px; border-radius: 4px; background: #1e88e5; } .sos-pal i:nth-child(2) { background: #43a047; } .sos-pal i:nth-child(3) { background: #e53935; }
.sos-sws { margin: 72px 0 0 140px; display: flex; gap: 3px; padding: 3px; border-radius: 6px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); opacity: 0; }
.sos-sws i { display: flex; align-items: center; width: 24px; height: 18px; padding: 0 3px; box-sizing: border-box; border: 1px solid #cfd8dc; border-radius: 4px; }
.sos-sws i::after { content: ''; flex: 1; height: 1px; background: #37474f; } .sos-sws i:nth-child(2)::after { height: 3px; } .sos-sws i:nth-child(3)::after { height: 6px; }
.soz-sl img.sos-p { width: 50px; height: 50px; border-radius: 0; } .soz-sl img.sos-p1 { margin: 92px 0 0 56px; } .soz-sl img.sos-p2 { margin: 92px 0 0 194px; }
.sos-ar { margin: 102px 0 0 116px; width: 68px; height: 30px; overflow: visible; opacity: 0; }
.sos-ar path { fill: #1e88e5; stroke: #37474f; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sos-box { margin: 146px 0 0 104px; width: 92px; height: 32px; border: 1.5px solid #37474f; border-radius: 7px; background: #fff59d; text-align: center; font-size: 14px; line-height: 30px; opacity: 0; overflow: hidden; }
.sos-box b { display: inline-block; max-width: 0; overflow: hidden; vertical-align: top; white-space: nowrap; }
.sos-cur { margin: 170px 0 0 214px; transform-origin: 0 0; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); z-index: 2; }
.sos-sl[class] .soz-x { display: none; }
[data-k="0"] .sos-menu { animation: sos-m0 4.2s both; } [data-k="0"] .sos-ar { animation: sos-a0 4.2s both; } [data-k="0"] .sos-cur { animation: sos-c0 4.2s both; }
@keyframes sos-m0 { 0%, 26% { opacity: 0; } 30%, 52% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes sos-a0 { 0%, 54% { opacity: 0; transform: scale(.5); } 66%, 100% { opacity: 1; transform: none; } }
@keyframes sos-c0 { 0% { margin: 170px 0 0 214px; } 22%, 26% { margin: 28px 0 0 84px; } 46%, 54% { margin: 58px 0 0 106px; } 78%, 100% { margin: 58px 0 0 150px; } }
[data-k="1"] .sos-ar, [data-k="2"] .sos-ar, [data-k="3"] .sos-ar { opacity: 1; }
[data-k="1"] .sos-pal { animation: sos-m0 4.2s both; } [data-k="1"] .sos-cur { animation: sos-c1 4.2s both; } [data-k="1"] .sos-ar path { animation: sos-f1 4.2s both; }
@keyframes sos-c1 { 0% { margin: 58px 0 0 150px; } 22%, 26% { margin: 28px 0 0 124px; } 46%, 54% { margin: 56px 0 0 138px; } 78%, 100% { margin: 56px 0 0 150px; } }
@keyframes sos-f1 { 0%, 52% { fill: #1e88e5; } 56%, 100% { fill: #43a047; } }
[data-k="2"] .sos-pal { margin-left: 140px; animation: sos-m2 4.2s both; } [data-k="2"] .sos-sws { animation: sos-m2 4.2s both; } [data-k="2"] .sos-cur { animation: sos-c2 4.2s both; } [data-k="2"] .sos-ar path { fill: #43a047; animation: sos-s2 4.2s both; }
@keyframes sos-m2 { 0%, 20% { opacity: 0; } 24%, 76% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes sos-c2 { 0% { margin: 56px 0 0 150px; } 18%, 22% { margin: 28px 0 0 164px; } 40%, 46% { margin: 56px 0 0 206px; } 66%, 74% { margin: 82px 0 0 212px; } 92%, 100% { margin: 136px 0 0 212px; } }
@keyframes sos-s2 { 0%, 44% { stroke: #37474f; stroke-width: 1.5; } 48%, 70% { stroke: #e53935; stroke-width: 1.5; } 74%, 100% { stroke: #e53935; stroke-width: 5; } }
[data-k="3"] .sos-ar path { fill: #43a047; stroke: #e53935; stroke-width: 5; } [data-k="3"] .sos-box { animation: sos-b3 4.2s both; } [data-k="3"] .sos-box b { animation: sos-t3 4.2s both steps(6); } [data-k="3"] .sos-cur { animation: sos-c3 4.2s both; }
@keyframes sos-b3 { 0%, 8% { opacity: 0; } 14%, 100% { opacity: 1; } }
@keyframes sos-t3 { 0%, 36% { max-width: 0; } 86%, 100% { max-width: 60px; } }
@keyframes sos-c3 { 0% { margin: 70px 0 0 200px; } 28%, 100% { margin: 166px 0 0 186px; } }
/* Φακός του 🖼️ επιπέδου 4 (3.09, στο ίδιο slg-snapz): μία σκηνή σε κάθε βήμα (sol-s0…3) — ο δείκτης πατά το αντικείμενο και μετά το κουμπί που ανάβει:
   0 ⬆️ η λεζάντα «Χελώνα» βγαίνει μπροστά από την κάρτα · 1 ⬇️ ο ουρανός πάει πίσω και φαίνεται ο Ήλιος · 2 📋 το μήλο γίνεται δύο · 3 ☑️ όλα επιλέγονται και σέρνονται μαζί */
.sol-bar { margin: 14px 0 0 66px; display: flex; gap: 6px; }
.sol-bar i { width: 34px; height: 26px; border: 1px solid #cfd8dc; border-radius: 6px; background: #fff; font-style: normal; font-size: 14px; line-height: 24px; text-align: center; }
.sol-sl > [class*="sol-s"] { opacity: 0; }
[data-k="0"] .sol-s0, [data-k="1"] .sol-s1, [data-k="2"] .sol-s2, [data-k="3"] .sol-s3 { opacity: 1; }
[data-k="0"] .sol-bar i:nth-child(1), [data-k="1"] .sol-bar i:nth-child(2), [data-k="2"] .sol-bar i:nth-child(3), [data-k="3"] .sol-bar i:nth-child(4) { animation: sol-btn 4.2s both; }
@keyframes sol-btn { 0%, 44% { background: #fff; border-color: #cfd8dc; } 48%, 60% { background: #ffe0b2; border-color: #ff9800; } 64%, 100% { background: #fff; border-color: #cfd8dc; } }
.sol-card { margin: 52px 0 0 110px; width: 80px; height: 84px; border: 1px solid #cfd8dc; border-radius: 8px; background: #fff; z-index: 2; display: flex; align-items: center; justify-content: center; }
.soz-sl .sol-card img { width: 66px; height: 66px; border-radius: 0; }
.sol-cap { margin: 120px 0 0 112px; width: 76px; height: 26px; box-sizing: border-box; border-radius: 4px; background: #fff59d; font-size: 12px; font-weight: 700; line-height: 26px; text-align: center; z-index: 1; }
[data-k="0"] .sol-cap { animation: sol-up 4.2s both; } [data-k="0"] .sol-cur { animation: sol-c0 4.2s both; }
@keyframes sol-up { 0%, 22% { z-index: 1; outline: 0 dashed #0288d1; } 26%, 52% { z-index: 1; outline: 1.5px dashed #0288d1; } 56%, 100% { z-index: 3; outline: 1.5px dashed #0288d1; } }
@keyframes sol-c0 { 0% { margin: 170px 0 0 214px; } 20% { margin: 140px 0 0 150px; transform: none; } 23% { margin: 140px 0 0 150px; transform: scale(.8); } 27% { margin: 140px 0 0 150px; transform: none; } 46% { margin: 27px 0 0 83px; transform: none; } 49% { margin: 27px 0 0 83px; transform: scale(.8); } 53%, 100% { margin: 27px 0 0 83px; transform: none; } }
.soz-sl img.sol-sun { margin: 66px 0 0 128px; width: 44px; height: 44px; border-radius: 0; z-index: 1; }
.sol-sky { margin: 50px 0 0 84px; width: 132px; height: 86px; border-radius: 4px; background: #81d4fa; z-index: 2; }
[data-k="1"] .sol-sky { animation: sol-down 4.2s both; } [data-k="1"] .sol-cur { animation: sol-c1 4.2s both; }
@keyframes sol-down { 0%, 22% { z-index: 2; outline: 0 dashed #0288d1; } 26%, 52% { z-index: 2; outline: 1.5px dashed #0288d1; } 56%, 100% { z-index: 0; outline: 1.5px dashed #0288d1; } }
@keyframes sol-c1 { 0% { margin: 27px 0 0 83px; } 20% { margin: 118px 0 0 196px; transform: none; } 23% { margin: 118px 0 0 196px; transform: scale(.8); } 27% { margin: 118px 0 0 196px; transform: none; } 46% { margin: 27px 0 0 123px; transform: none; } 49% { margin: 27px 0 0 123px; transform: scale(.8); } 53%, 100% { margin: 27px 0 0 123px; transform: none; } }
.soz-sl img.sol-ap { margin: 80px 0 0 120px; width: 44px; height: 44px; border-radius: 0; }
[data-k="2"] .sol-ap1 { animation: sol-sel 4.2s both; } [data-k="2"] .sol-ap2 { animation: sol-dup 4.2s both; } [data-k="2"] .sol-cur { animation: sol-c2 4.2s both; }
@keyframes sol-sel { 0%, 22% { outline: 0 dashed #0288d1; } 26%, 52% { outline: 1.5px dashed #0288d1; } 56%, 100% { outline: 0 dashed #0288d1; } }
@keyframes sol-dup { 0%, 53% { opacity: 0; margin: 92px 0 0 132px; outline: 1.5px dashed #0288d1; } 56%, 64% { opacity: 1; margin: 92px 0 0 132px; outline: 1.5px dashed #0288d1; } 88%, 100% { opacity: 1; margin: 80px 0 0 180px; outline: 1.5px dashed #0288d1; } }
@keyframes sol-c2 { 0% { margin: 27px 0 0 123px; } 20% { margin: 100px 0 0 142px; transform: none; } 23% { margin: 100px 0 0 142px; transform: scale(.8); } 27% { margin: 100px 0 0 142px; transform: none; } 46% { margin: 27px 0 0 163px; transform: none; } 49% { margin: 27px 0 0 163px; transform: scale(.8); } 53% { margin: 27px 0 0 163px; transform: none; } 61% { margin: 112px 0 0 154px; transform: none; } 64% { margin: 112px 0 0 154px; transform: scale(.8); } 88% { margin: 100px 0 0 202px; transform: scale(.8); } 92%, 100% { margin: 100px 0 0 202px; transform: none; } }
.sol-grp { margin: 74px 0 0 62px; display: flex; gap: 6px; }
.soz-sl .sol-grp img { width: 40px; height: 36px; border-radius: 0; object-fit: contain; }
[data-k="3"] .sol-grp { animation: sol-mv 4.2s both; } [data-k="3"] .sol-grp img { animation: sol-all 4.2s both; } [data-k="3"] .sol-cur { animation: sol-c3 4.2s both; }
@keyframes sol-all { 0%, 26% { outline: 0 dashed #0288d1; } 30%, 100% { outline: 1.5px dashed #0288d1; } }
@keyframes sol-mv { 0%, 54% { margin: 74px 0 0 62px; } 86%, 100% { margin: 74px 0 0 112px; } }
/* Φακός του 🖼️ επιπέδου 5 (3.10, στο ίδιο slg-snapz): μία διαφάνεια «Τα μέρη του φυτού» που χτίζεται βήμα-βήμα —
   0 🖼️ μπαίνει το ηλιοτρόπιο · 1 ↘ μεγαλώνει από τη γωνία · 2 🔷 βέλος από το «Άνθος», που γίνεται πράσινο · 3 ⬆️ το «Φύλλο», πίσω από το φυτό, βγαίνει μπροστά */
.som-bar { margin-left: 96px; }
.som-cap { margin: 74px 0 0 66px; width: 52px; height: 22px; border-radius: 4px; background: #fff59d; font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; z-index: 1; }
.som-c2 { margin: 86px 0 0 162px; }
.soz-sl img.som-fl { margin: 62px 0 0 152px; width: 70px; height: 70px; border-radius: 0; z-index: 2; }
.som-ar { margin: 78px 0 0 121px; width: 28px; height: 16px; overflow: visible; opacity: 0; }
.som-ar path { fill: #1e88e5; stroke: #37474f; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
[data-k="0"] .som-fl { animation: som-in 4.2s both; } [data-k="0"] .som-cur { animation: som-c0 4.2s both; }
@keyframes som-in { 0%, 50% { opacity: 0; width: 46px; height: 46px; } 58%, 100% { opacity: 1; width: 46px; height: 46px; } }
@keyframes som-c0 { 0% { margin: 170px 0 0 214px; } 22% { margin: 27px 0 0 113px; transform: none; } 25% { margin: 27px 0 0 113px; transform: scale(.8); } 29% { margin: 27px 0 0 113px; transform: none; } 46% { margin: 84px 0 0 175px; transform: none; } 49% { margin: 84px 0 0 175px; transform: scale(.8); } 53%, 100% { margin: 84px 0 0 175px; transform: none; } }
[data-k="1"] .som-fl { animation: som-grow 4.2s both; } [data-k="1"] .som-cur { animation: som-c1 4.2s both; }
@keyframes som-grow { 0%, 26% { width: 46px; height: 46px; outline: 1.5px dashed #0288d1; } 62%, 92% { width: 70px; height: 70px; outline: 1.5px dashed #0288d1; } 96%, 100% { width: 70px; height: 70px; outline: 0 dashed #0288d1; } }
@keyframes som-c1 { 0% { margin: 84px 0 0 175px; } 20% { margin: 106px 0 0 196px; transform: none; } 26% { margin: 106px 0 0 196px; transform: scale(.8); } 62% { margin: 130px 0 0 220px; transform: scale(.8); } 68%, 100% { margin: 130px 0 0 220px; transform: none; } }
[data-k="2"] .som-ar { animation: som-ar 4.2s both; } [data-k="2"] .som-ar path { animation: som-gr 4.2s both; } [data-k="2"] .som-cur { animation: som-c2 4.2s both; }
@keyframes som-ar { 0%, 36% { opacity: 0; transform: scale(.5); } 46%, 100% { opacity: 1; transform: none; } }
@keyframes som-gr { 0%, 70% { fill: #1e88e5; } 76%, 100% { fill: #43a047; } }
@keyframes som-c2 { 0% { margin: 130px 0 0 220px; } 22% { margin: 27px 0 0 153px; transform: none; } 25% { margin: 27px 0 0 153px; transform: scale(.8); } 29% { margin: 27px 0 0 153px; transform: none; } 46%, 60% { margin: 88px 0 0 136px; } 70%, 100% { margin: 88px 0 0 136px; transform: none; } }
[data-k="3"] .som-ar { opacity: 1; } [data-k="3"] .som-ar path { fill: #43a047; }
[data-k="3"] .som-c2 { animation: som-up 4.2s both; } [data-k="3"] .som-cur { animation: som-c3 4.2s both; }
@keyframes som-up { 0%, 22% { z-index: 1; outline: 0 dashed #0288d1; } 26%, 52% { z-index: 1; outline: 1.5px dashed #0288d1; } 56%, 100% { z-index: 3; outline: 1.5px dashed #0288d1; } }
@keyframes som-c3 { 0% { margin: 88px 0 0 136px; } 20% { margin: 100px 0 0 166px; transform: none; } 23% { margin: 100px 0 0 166px; transform: scale(.8); } 27% { margin: 100px 0 0 166px; transform: none; } 46% { margin: 27px 0 0 193px; transform: none; } 49% { margin: 27px 0 0 193px; transform: scale(.8); } 53%, 100% { margin: 27px 0 0 193px; transform: none; } }
@keyframes sol-c3 { 0% { margin: 27px 0 0 163px; } 20% { margin: 27px 0 0 203px; transform: none; } 23% { margin: 27px 0 0 203px; transform: scale(.8); } 27% { margin: 27px 0 0 203px; transform: none; } 48% { margin: 92px 0 0 80px; transform: none; } 52%, 54% { margin: 92px 0 0 80px; transform: scale(.8); } 86% { margin: 92px 0 0 130px; transform: scale(.8); } 90%, 100% { margin: 92px 0 0 130px; transform: none; } }