/* ===================== Επίδειξη-βοήθεια των παιχνιδιών του Ποντικιού (js/mousedemo.js) =====================
   Όλες οι κινήσεις τρέχουν σε κοινό κύκλο --cyc (ορίζεται στο .md-card). Τα παλμικά εφέ (.md-press, .md-ring)
   μετατοπίζονται στη στιγμή --at με αρνητικό animation-delay· ο δείκτης πηγαίνει στους στόχους --x1/--y1… */
.md-veil { position: absolute; inset: 0; z-index: 40; pointer-events: none; background: rgba(30, 40, 80, .32); display: flex; align-items: center; justify-content: center; animation: md-in .35s ease-out; }
.md-veil.out { animation: md-out .38s ease-in forwards; }
@keyframes md-in { from { opacity: 0; } }
@keyframes md-out { to { opacity: 0; transform: scale(1.04); } }
.md-card { background: rgba(255, 255, 255, .95); border-radius: 30px; padding: 12px 24px 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, .3), inset 0 0 0 4px #fff; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.md-title { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 800; color: #4527a0; }
.md-title span { font-size: 34px; }
.md-stage { display: flex; align-items: center; gap: 28px; }
.md-bottom { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.md-bottom .level-picker { margin: 0; }
.md-skip { font-family: inherit; font-size: 22px; width: 46px; height: 46px; border-radius: 50%; border: 3px solid #9575cd; background: #fff; color: #4527a0; cursor: pointer; box-shadow: 0 3px 0 #7e57c2; transition: transform .15s; }
.md-skip:hover { transform: scale(1.1); }

/* ---- το μεγάλο ποντίκι ---- */
.md-mouse { position: relative; width: 156px; height: 180px; flex: none; }
.md-mouse-svg { width: 100%; height: 100%; display: block; }
.md-arrows, .md-wup, .md-wdn { opacity: 0; }
.md-move .md-arrows { opacity: 1; animation: pulse-move .7s infinite alternate; transform-box: fill-box; transform-origin: center; }
.md-left .md-bl, .md-both .md-bl { fill: #ffcdd2; }
.md-right .md-br, .md-both .md-br { fill: #ffcdd2; }
.md-wheel .md-wh { fill: #ff8a80; }
/* πάτημα κουμπιού: κόκκινη επικάλυψη πάνω από το κουμπί (θέσεις σε % του viewBox 130×150), αναβοσβήνει τη στιγμή --at */
.md-press { position: absolute; top: 23.3%; width: 26.9%; height: 26.7%; background: rgba(255, 82, 82, .9); opacity: 0; pointer-events: none;
  animation: md-press var(--cyc) infinite; animation-delay: calc(var(--cyc) * (var(--at) - 1)); }
.md-press.l { left: 19.2%; border-radius: 100% 0 0 0 / 100% 0 0 0; }
.md-press.r { left: 46.2%; border-radius: 0 100% 0 0 / 0 100% 0 0; }
@keyframes md-press { 0%, 9% { opacity: 1; } 15%, 100% { opacity: 0; } }
/* ροδάκι: οι ρίγες κυλούν πάνω (5–30%) και κάτω (55–80%), με το αντίστοιχο βελάκι */
.md-wheel .md-wl { animation: md-roll var(--cyc) infinite; }
.md-wheel .md-wup { animation: md-wup var(--cyc) infinite; }
.md-wheel .md-wdn { animation: md-wdn var(--cyc) infinite; }
@keyframes md-roll { 0%, 5% { transform: translateY(0); } 30%, 55% { transform: translateY(-12px); } 80%, 100% { transform: translateY(0); } }
@keyframes md-wup { 0%, 4% { opacity: 0; } 6%, 29% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes md-wdn { 0%, 54% { opacity: 0; } 56%, 79% { opacity: 1; } 81%, 100% { opacity: 0; } }
/* κίνηση: όλο το ποντίκι μετακινείται μαζί με τον δείκτη της σκηνής */
.md-mouse.md-s-stars .md-mouse-svg { animation: md-mm-stars var(--cyc) infinite; }
.md-mouse.md-s-reveal .md-mouse-svg { animation: md-mm-reveal var(--cyc) infinite; }
@keyframes md-mm-stars { 0%, 100% { transform: translate(0, 0); } 40%, 88% { transform: translate(24px, -20px); } }
@keyframes md-mm-reveal { 0%, 100% { transform: translate(-16px, -8px); } 10% { transform: translate(-16px, -8px); } 40% { transform: translate(16px, -8px); } 50% { transform: translate(16px, 8px); } 80%, 92% { transform: translate(-16px, 8px); } }

/* ---- η σκηνή (320×200) ---- */
.md-scene { position: relative; width: 320px; height: 200px; border-radius: 20px; overflow: hidden; flex: none; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .08); }
.md-bg { position: absolute; inset: 0; }
.md-sea { background: linear-gradient(#4fc3f7, #0288d1); }
.md-room { background: linear-gradient(#fff8e1, #ffe0b2 70%, #bcaaa4 70%); }
.md-sky { background: linear-gradient(#81d4fa, #e1f5fe 75%, #a5d6a7 75%); }
.md-night { background: radial-gradient(circle at 30% 20%, #3949ab, #1a237e); }
.md-pic { background: linear-gradient(#ffe082, #ffb74d); }
.md-garden { background: linear-gradient(#e8f5e9, #c8e6c9); }
.md-arena { background: linear-gradient(#ede7f6, #d1c4e9); }
.md-scene > .md-bg > * { position: absolute; }
/* δείκτης: μύτη στο (0,0)· οι στόχοι έρχονται ως --x1/--y1… */
.md-cur { width: 28px; height: 36px; left: 0; top: 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); z-index: 5; animation-duration: var(--cyc); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.md-cur1 { animation-name: md-cur1; }
.md-cur2 { animation-name: md-cur2; }
.md-cur3 { animation-name: md-cur3; }
.md-cur-rev { animation-name: md-cur-rev; animation-timing-function: linear; }
@keyframes md-cur1 { 0%, 100% { transform: translate(30px, 180px); } 40%, 88% { transform: translate(var(--x1), var(--y1)); } }
@keyframes md-cur2 { 0%, 100% { transform: translate(30px, 180px); } 18%, 50% { transform: translate(var(--x1), var(--y1)); } 68%, 92% { transform: translate(var(--x2), var(--y2)); } }
@keyframes md-cur3 { 0%, 100% { transform: translate(30px, 180px); } 16%, 30% { transform: translate(var(--x1), var(--y1)); } 46%, 60% { transform: translate(var(--x2), var(--y2)); } 76%, 92% { transform: translate(var(--x3), var(--y3)); } }
@keyframes md-cur-rev { 0%, 100% { transform: translate(20px, 190px); } 10% { transform: translate(60px, 55px); } 40% { transform: translate(260px, 55px); } 50% { transform: translate(260px, 145px); } 80%, 92% { transform: translate(60px, 145px); } }
/* κύμα κλικ (μπλε = αριστερό, πορτοκαλί = δεξί) */
.md-ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 4px solid #42a5f5; opacity: 0; z-index: 4;
  animation: md-ring var(--cyc) infinite; animation-delay: calc(var(--cyc) * (var(--at) - 1)); }
.md-ring.r { border-color: #ff7043; }
@keyframes md-ring { 0% { transform: scale(.2); opacity: .95; } 14%, 100% { transform: scale(1.8); opacity: 0; } }

/* Φούσκες: η φούσκα σκάει στο 45% */
.md-bubble { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,.35) 30%, rgba(173,216,255,.45) 60%, rgba(100,149,237,.55)); border: 3px solid rgba(255,255,255,.85);
  animation: md-pop45 var(--cyc) infinite; }
@keyframes md-pop45 { 0%, 100% { transform: scale(1); opacity: 1; } 22% { transform: scale(1.06) translateY(-4px); } 44% { transform: scale(1); opacity: 1; } 51% { transform: scale(1.5); opacity: 0; } 99% { transform: scale(1); opacity: 0; } }
/* Δώρα: το δώρο ανοίγει και πετάγεται το παιχνίδι (στο 45%· με δύο στόχους: δώρο στο 22%, μπαλόνι στο 72%) */
.md-gift { width: 70px; height: 80px; }
.md-gift span { position: absolute; left: 0; right: 0; text-align: center; font-size: 60px; line-height: 1; }
.md-gift .g { bottom: 0; animation: md-gift45 var(--cyc) infinite; }
.md-gift .t { bottom: 6px; opacity: 0; animation: md-toy45 var(--cyc) infinite; }
.md-gift.two .g { animation-name: md-gift22; }
.md-gift.two .t { animation-name: md-toy22; }
@keyframes md-gift45 { 0%, 44%, 100% { transform: scale(1); opacity: 1; } 48% { transform: scale(1.15) rotate(-6deg); } 54%, 99% { transform: scale(0); opacity: 0; } }
@keyframes md-toy45 { 0%, 46%, 100% { opacity: 0; transform: translateY(20px) scale(.4); } 58%, 90% { opacity: 1; transform: translateY(-20px) scale(1.1); } 99% { opacity: 0; transform: translateY(-20px) scale(1.1); } }
@keyframes md-gift22 { 0%, 21%, 100% { transform: scale(1); opacity: 1; } 24% { transform: scale(1.15) rotate(-6deg); } 29%, 99% { transform: scale(0); opacity: 0; } }
@keyframes md-toy22 { 0%, 22%, 100% { opacity: 0; transform: translateY(20px) scale(.4); } 32%, 92% { opacity: 1; transform: translateY(-20px) scale(1.1); } 99% { opacity: 0; transform: translateY(-20px) scale(1.1); } }
.md-bal2 { font-size: 52px; line-height: 1; animation: md-pop72 var(--cyc) infinite; }
@keyframes md-pop72 { 0%, 100% { transform: scale(1); opacity: 1; } 35% { transform: translateY(-6px); } 71% { transform: scale(1); opacity: 1; } 77% { transform: scale(1.5); opacity: 0; } 99% { transform: scale(1); opacity: 0; } }
/* Μπαλόνι: ροδάκι πάνω (5–30%) → το μπαλόνι ανεβαίνει στον φίλο· ο φίλος κατεβαίνει (50%) → ροδάκι κάτω (55–80%) → το μπαλόνι κατεβαίνει */
.md-ground { left: 0; right: 0; bottom: 6px; text-align: center; font-size: 26px; letter-spacing: 6px; }
.md-friend { left: 220px; top: 36px; font-size: 40px; line-height: 1; animation: md-friend var(--cyc) infinite; }
.md-balloon { left: 150px; top: 108px; font-size: 56px; line-height: 1; animation: md-balloon var(--cyc) infinite; }
.md-spark { font-size: 30px; line-height: 1; opacity: 0; left: 205px; }
.md-spark.s1 { top: 30px; animation: md-spark1 var(--cyc) infinite; }
.md-spark.s2 { top: 110px; animation: md-spark2 var(--cyc) infinite; }
@keyframes md-balloon { 0%, 5%, 100% { transform: translateY(0); } 30%, 55% { transform: translateY(-80px); } 80% { transform: translateY(0); } }
@keyframes md-friend { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(80px); } }
@keyframes md-spark1 { 0%, 30%, 45%, 100% { opacity: 0; transform: scale(.4); } 34%, 41% { opacity: 1; transform: scale(1.2); } }
@keyframes md-spark2 { 0%, 80%, 95%, 100% { opacity: 0; transform: scale(.4); } 84%, 91% { opacity: 1; transform: scale(1.2); } }
/* Κυνήγι αστεριών: το αστέρι λαμπυρίζει και «πιάνεται» όταν φτάνει ο δείκτης (45%) */
.md-star { font-size: 56px; line-height: 1; filter: drop-shadow(0 0 10px #fff59d); animation: md-star45 var(--cyc) infinite; }
@keyframes md-star45 { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 22% { transform: scale(1.15) rotate(10deg); } 44% { transform: scale(1); opacity: 1; } 53% { transform: scale(1.8) rotate(30deg); opacity: 0; } 99% { transform: scale(1); opacity: 0; } }
/* Μαγική εικόνα: τα 6 κουτάκια σβήνουν καθώς περνά ο δείκτης (ζιγκ-ζαγκ) */
.md-pic-emoji { left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; }
.md-tiles { left: 10px; top: 10px; width: 300px; height: 180px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.md-tile { border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); animation-duration: var(--cyc); animation-iteration-count: infinite; }
.md-tile.t1 { animation-name: md-tile1; } .md-tile.t2 { animation-name: md-tile2; } .md-tile.t3 { animation-name: md-tile3; }
.md-tile.t4 { animation-name: md-tile4; } .md-tile.t5 { animation-name: md-tile5; } .md-tile.t6 { animation-name: md-tile6; }
@keyframes md-tile1 { 0%, 11%, 100% { opacity: 1; transform: scale(1); } 16%, 96% { opacity: 0; transform: scale(.6); } }
@keyframes md-tile2 { 0%, 24%, 100% { opacity: 1; transform: scale(1); } 29%, 96% { opacity: 0; transform: scale(.6); } }
@keyframes md-tile3 { 0%, 39%, 100% { opacity: 1; transform: scale(1); } 44%, 96% { opacity: 0; transform: scale(.6); } }
@keyframes md-tile6 { 0%, 51%, 100% { opacity: 1; transform: scale(1); } 56%, 96% { opacity: 0; transform: scale(.6); } }
@keyframes md-tile5 { 0%, 65%, 100% { opacity: 1; transform: scale(1); } 70%, 96% { opacity: 0; transform: scale(.6); } }
@keyframes md-tile4 { 0%, 79%, 100% { opacity: 1; transform: scale(1); } 84%, 96% { opacity: 0; transform: scale(.6); } }
/* Ένωσε τις τελείες: 3 κλικ (20/50/80%), οι γραμμές εμφανίζονται μετά το 2ο και 3ο, οι τελείες γίνονται πράσινες */
.md-dots { left: 0; top: 0; width: 320px; height: 200px; }
.md-dots line { stroke: #7e57c2; stroke-width: 5; stroke-linecap: round; opacity: 0; }
.md-dots .md-l1 { animation: md-l1 var(--cyc) infinite; } .md-dots .md-l2 { animation: md-l2 var(--cyc) infinite; }
@keyframes md-l1 { 0%, 51%, 100% { opacity: 0; } 55%, 96% { opacity: 1; } }
@keyframes md-l2 { 0%, 81%, 100% { opacity: 0; } 85%, 96% { opacity: 1; } }
.md-dot circle { fill: #ff7043; stroke: #fff; stroke-width: 3; }
.md-dot text { fill: #fff; font-weight: 800; font-size: 16px; text-anchor: middle; font-family: inherit; }
.md-dot.d1 circle { animation: md-dot1 var(--cyc) infinite; } .md-dot.d2 circle { animation: md-dot2 var(--cyc) infinite; } .md-dot.d3 circle { animation: md-dot3 var(--cyc) infinite; }
@keyframes md-dot1 { 0%, 21%, 100% { fill: #ff7043; } 24%, 96% { fill: #66bb6a; } }
@keyframes md-dot2 { 0%, 51%, 100% { fill: #ff7043; } 54%, 96% { fill: #66bb6a; } }
@keyframes md-dot3 { 0%, 81%, 100% { fill: #ff7043; } 84%, 96% { fill: #66bb6a; } }
/* Μονομαχία κλικ: η ροή δείχνει ΑΡΙΣΤΕΡΟ (0–50%) και μετά ΔΕΞΙ (50–100%)· ο αντίπαλος ξεφουσκώνει σε κάθε σωστό κλικ */
.md-flow { left: 0; right: 0; top: 8px; display: flex; justify-content: center; gap: 14px; }
.md-slot { width: 50px; height: 58px; border-radius: 12px; border: 3px solid #e0e0e0; background: #fafafa; display: flex; align-items: center; justify-content: center; animation-duration: var(--cyc); animation-iteration-count: infinite; }
.md-slot .mouse-icon { width: 30px; height: 38px; }
.md-slot.sl { animation-name: md-slotL; } .md-slot.sr { animation-name: md-slotR; }
@keyframes md-slotL { 0%, 49% { transform: scale(1.15); opacity: 1; border-color: #7e57c2; } 50%, 100% { transform: scale(.85); opacity: .35; } }
@keyframes md-slotR { 0%, 49% { transform: scale(.85); opacity: .35; } 50%, 100% { transform: scale(1.15); opacity: 1; border-color: #7e57c2; } }
.md-enemy { left: 160px; top: 132px; margin: -46px 0 0 -46px; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; font-size: 76px; line-height: 1; animation: md-enemy var(--cyc) infinite; }
@keyframes md-enemy { 0%, 26%, 100% { transform: scale(1); } 30%, 76% { transform: scale(.8); } 80%, 96% { transform: scale(.6); } }

@media (max-height: 720px) { .md-card { transform: scale(.85); } }
@media (max-width: 760px) { .md-stage { flex-direction: column; gap: 10px; } .md-mouse { width: 110px; height: 127px; } }