/* ============================================================
   Μαθητούπολη — AAA layer για ΤΟ ΠΑΙΧΝΙΔΙ (app.html)
   Φορτώνεται μετά το game.css. Μόνο όψη, καμία λογική.
   ============================================================ */

/* ---------- Σκηνικό ---------- */
body.game {
  background:
    radial-gradient(120% 80% at 50% -10%, #12406b 0%, #071a30 46%, #04101f 100%) fixed;
  color: #e6f0fa;
}

/* το νησί «κάτω» από όλες τις οθόνες επιλογής */
body.game::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('../img/treasure_map.jpg') center 30% / cover no-repeat;
  opacity: .20;
  filter: saturate(1.15) blur(1px);
  z-index: 0;
  pointer-events: none;
}
body.game::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(90% 65% at 50% 34%, transparent 0%, rgba(4, 16, 31, .55) 62%, rgba(4, 16, 31, .95) 100%);
  z-index: 0;
  pointer-events: none;
}
/* 🔴 ΜΗΝ βάλεις το .verdict εδώ μέσα.
   Το `.verdict` του game.css είναι `position: fixed; bottom: 0` και κρύβεται
   με `transform: translateY(110%)`. Όταν το είχα συμπεριλάβει σε αυτόν τον
   κανόνα, το `position: relative` ακύρωνε το fixed: το πράσινο πάνελ
   «Μπράβο!» έμπαινε στη ροή της σελίδας και φαινόταν ΜΟΝΙΜΑ — ακόμα και
   στις Ρυθμίσεις και στη λίστα πιστών, καβαλώντας τους τίτλους.
   Τα .screen/.topbar θέλουν το z-index για να μπουν πάνω από το
   `body.game::before/::after` (το θολό νησί του φόντου). */
.topbar, .screen { position: relative; z-index: 1; }

/* ---------- HUD πάνω μπάρα ---------- */
.topbar {
  background: linear-gradient(180deg, rgba(8, 26, 46, .96), rgba(8, 26, 46, .78));
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}
.topbar .crumb { color: #fff; }
.topbar .crumb small { color: #8fabc4; }
.icon-btn {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #e6f0fa;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35);
}
.pill {
  background: rgba(255, 200, 70, .14);
  border: 1px solid rgba(255, 200, 70, .4);
  color: #ffe0a0;
  text-shadow: 0 0 12px rgba(255, 200, 70, .5);
}
.pill.stars {
  background: rgba(126, 160, 255, .16);
  border-color: rgba(150, 180, 255, .45);
  color: #cfdcff;
}

/* ---------- Τίτλοι οθονών ---------- */
.screen h2 {
  color: #fff;
  font-family: 'Baloo 2', 'Nunito', sans-serif;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .7);
}
.screen .lead { color: #a8c3da; }

/* ---------- 1. Καλωσόρισμα = η πύλη της κατασκήνωσης ---------- */
#s-welcome { padding-top: 0; }
.gate {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  margin: 12px 0 22px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .14);
}
/* 🔴 Η ΕΙΚΟΝΑ ΤΗΣ ΠΥΛΗΣ. Ήταν καρφωμένο `aspect-ratio: 16/8` από την παλιά
   εικόνα. Η καινούρια (`hero_camp_cinematic.jpg`) είναι **1672×941, δηλαδή
   16/9** — με 16/8 την πετσόκοβε πάνω-κάτω και έκοβε τα ζωάκια, που φαινόταν
   σαν παραμόρφωση. Ο Μάνος νόμιζε ότι του γύρισα την παλιά εικόνα· η εικόνα
   ήταν η σωστή, το CSS ήταν λάθος.
   ΑΝ ΑΛΛΑΞΕΙ Η ΕΙΚΟΝΑ, ΑΛΛΑΞΕ ΚΑΙ ΤΟΝ ΛΟΓΟ ΕΔΩ. */
.gate img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.gate .gate-txt {
  position: absolute; inset: auto 0 0 0;
  padding: 60px 20px 20px;
  background: linear-gradient(180deg, transparent, rgba(4, 16, 31, .94));
  text-align: center;
}
.gate .gate-txt h2 { margin: 0 0 2px; font-size: clamp(1.3rem, 5vw, 2rem); }
.gate .gate-txt p { margin: 0; color: #bcd4e8; font-weight: 700; font-size: .92rem; }

body.game .card {
  background: linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
  backdrop-filter: blur(12px);
  color: #e6f0fa;
}
.field {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(255, 255, 255, .3);
  color: #14283f;
}

/* ---------- Επιλογή ήρωα ---------- */
/* 14 ήρωες σε ΔΥΟ ΣΕΙΡΕΣ ΤΩΝ 7 — ζητούμενο του Μάνου: «να είναι
   συμμετρικά, 7 πάνω 7 κάτω». Σταθερές 7 στήλες αντί για auto-fill, που
   έβγαζε άνισες σειρές ανάλογα με το πλάτος. Σε στενές οθόνες σπάει
   σε 4 και 2, γιατί 7 στήλες σε κινητό θα ήταν απλησίαστες με το δάχτυλο. */
.avatars { grid-template-columns: repeat(7, 1fr); gap: 14px; }
@media (max-width: 900px) { .avatars { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
@media (max-width: 460px) { .avatars { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.avatar-pick {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: radial-gradient(85% 70% at 50% 15%, rgba(63, 216, 240, .22), rgba(255, 255, 255, .05));
  border: 2px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.3), border-color .18s, box-shadow .18s;
}
.avatar-pick img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.avatar-pick:hover img { transform: scale(1.08); }
.avatar-pick.sel {
  background: radial-gradient(85% 70% at 50% 15%, rgba(255, 200, 70, .3), rgba(255, 255, 255, .06));
  border-color: var(--gold, #ffc846);
  box-shadow: 0 0 0 3px rgba(255, 200, 70, .3), 0 14px 32px rgba(255, 170, 40, .35);
  transform: scale(1.07) translateY(-3px);
}
.avatar-pick.sel::after {
  content: '✓';
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #ffc846; color: #3a2200;
  font-size: .85rem; font-weight: 900;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
}

/* ---------- Κάρτες τάξης / μαθήματος ---------- */
body.game .pick {
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .45);
  color: #e6f0fa;
  backdrop-filter: blur(10px);
  transition: transform .18s, border-color .18s;
}
body.game .pick:hover { transform: translateY(-4px); border-color: rgba(255, 200, 70, .45); }
body.game .pick .mt { color: #93aec6; }
body.game .pick.locked { opacity: .38; }
body.game .bar { background: rgba(255, 255, 255, .12); }
body.game .bar > i { background: linear-gradient(90deg, #3fd8f0, #5ce0a0); box-shadow: 0 0 14px rgba(92, 224, 160, .6); }

/* το μεγάλο εικονίδιο κόσμου */
body.game .pick .em {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
  font-size: 2.7rem;
}

/* ---------- 3D νησί ---------- */
#map3d {
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 200, 70, .12);
}
.map3d-hint {
  background: rgba(4, 16, 31, .8) !important;
  color: #bcd4e8 !important;
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
}

/* =========================================================
   Ο ΧΑΡΤΗΣ ΘΗΣΑΥΡΟΥ (2D)
   ========================================================= */
.map {
  border-radius: 24px;
  /* Κάθετο νησί: γεμίζει όλη τη στήλη των 10 σταθμών, από την παραλία (κάτω)
     ως το ηφαίστειο με τον θησαυρό (πάνω).
     🔴 no-repeat + cover: με `auto` η εικόνα ξαναρχίζει στη μέση του χάρτη. */
  background:
    linear-gradient(180deg,
      rgba(4, 16, 31, .30) 0%,
      rgba(4, 16, 31, .22) 45%,
      rgba(4, 16, 31, .34) 100%),
    url('../img/map_vertical.jpg') center center / cover no-repeat,
    radial-gradient(120% 60% at 50% 100%, #0a3557 0%, #051c33 70%);
  box-shadow: inset 0 0 90px 24px rgba(4, 16, 31, .62), 0 26px 64px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .14);
}

/* ---------- Το μονοπάτι ---------- */
.map svg path { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .55)); }
.map svg path.lit { filter: drop-shadow(0 0 10px rgba(255, 200, 70, .55)); }
.map svg path.glow { filter: blur(7px); }
.map svg path.steps {
  filter: drop-shadow(0 0 7px rgba(255, 220, 140, .9));
  animation: trail 2.4s linear infinite;
}
@keyframes trail { to { stroke-dashoffset: -28; } }

/* =========================================================
   ΟΙ ΣΤΑΘΜΟΙ — μετάλλια που ΣΤΕΚΟΝΤΑΙ πάνω στο νησί
   Το .node είναι πλέον άδειο πλαίσιο· τα κομμάτια μέσα του
   (σκιά, δίσκος, φωτοστέφανο) κινούνται το καθένα μόνο του.
   ========================================================= */
/* 🔴 Το game.css ορίζει background/box-shadow στα .node.done / .current /
   .locked — ΜΕΓΑΛΥΤΕΡΗ ειδικότητα από σκέτο .node. Χωρίς αυτό το μπλοκ,
   πίσω από κάθε μετάλλιο μένει ένα χρωματιστό τετράγωνο. */
.node,
.node.done,
.node.current,
.node.locked,
.node.ahead {
  background: none;
  box-shadow: none;
  border: 0;
  border-radius: 50%;
  animation: none;          /* το bob το κάνει πλέον ο δίσκος, όχι το πλαίσιο */
  color: #12283f;
}
.node {
  width: 88px; height: 88px; margin: -44px 0 0 -44px;
  display: block;
  padding: 0;
  overflow: visible;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.4);
}
.node:hover { transform: translateY(-4px) scale(1.05); }
.node:active { transform: translateY(2px) scale(.97); }

/* η σκιά στο έδαφος — αυτή «κολλάει» τον σταθμό στο νησί */
.node .n-shadow {
  position: absolute;
  left: 50%; bottom: -8px;
  width: 64px; height: 17px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(2, 10, 20, .68) 0%, rgba(2, 10, 20, .3) 55%, transparent 76%);
  pointer-events: none;
}

/* ο δίσκος: χρυσή στεφάνη, βαθύ κέντρο, γυάλισμα από πάνω */
.node .n-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(170deg, #f2f7fc 0%, #c3d4e4 52%, #93aabf 100%);
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow:
    0 0 0 4px rgba(6, 22, 40, .5),
    0 9px 0 rgba(8, 26, 46, .62),
    0 18px 34px rgba(0, 0, 0, .55),
    inset 0 -8px 16px rgba(10, 30, 52, .3),
    inset 0 5px 10px rgba(255, 255, 255, .6);
}
.node .n-face {
  font-size: 1.85rem;
  line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
}

/* ολοκληρωμένος */
.node.done .n-disc {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(170deg, #8df0bd 0%, #3cc98a 52%, #1d8a5c 100%);
  box-shadow:
    0 0 0 4px rgba(6, 40, 28, .5),
    0 9px 0 #14663f,
    0 18px 34px rgba(0, 0, 0, .5),
    0 0 30px rgba(80, 230, 160, .45),
    inset 0 -8px 16px rgba(8, 60, 38, .35),
    inset 0 5px 10px rgba(255, 255, 255, .55);
}

/* ο τρέχων — εδώ πρέπει να πάει το μάτι */
.node.current .n-disc {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(170deg, #fff2c4 0%, #ffc846 50%, #d88f12 100%);
  border-color: #fffaeb;
  box-shadow:
    0 0 0 4px rgba(60, 34, 2, .45),
    0 9px 0 #a4690e,
    0 18px 36px rgba(0, 0, 0, .5),
    0 0 42px rgba(255, 190, 60, .7),
    inset 0 -8px 16px rgba(120, 70, 6, .3),
    inset 0 5px 10px rgba(255, 255, 255, .7);
  animation: bob 1.6s ease-in-out infinite;
}
.node.current .n-face { font-size: 2.05rem; }

/* το φωτοστέφανο που «αναπνέει» γύρω από τον τρέχοντα */
.node .n-halo {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 3px solid rgba(255, 200, 70, .85);
  animation: halo 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes halo {
  0%   { transform: scale(.82); opacity: .9; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.node.ahead .n-halo { display: none; }

/* κλειδωμένος: πέτρα, σβηστός, αλλά ευδιάκριτος */
.node.locked .n-disc {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(170deg, #8497aa 0%, #55708b 52%, #33485e 100%);
  border-color: rgba(255, 255, 255, .55);
  box-shadow:
    0 0 0 4px rgba(6, 22, 40, .5),
    0 9px 0 #1d3148,
    0 16px 30px rgba(0, 0, 0, .55),
    inset 0 -8px 16px rgba(8, 22, 38, .45),
    inset 0 5px 10px rgba(255, 255, 255, .3);
}
.node.locked .n-face { font-size: 1.5rem; opacity: .95; }
.node.locked:hover { transform: none; }

/* ο αριθμός του μήνα — μικρή ταμπελίτσα */
.node .n-num {
  top: -6px; left: -8px;
  width: 28px; height: 28px;
  background: linear-gradient(160deg, #24455f, #0a1f33);
  border: 2px solid rgba(255, 255, 255, .6);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .55);
  font-size: .76rem;
  z-index: 2;
}
.node.current .n-num {
  background: linear-gradient(160deg, #fff0bd, #e2a319);
  color: #3a2200;
  border-color: #fff;
}

/* τα αστέρια κάτω από τον σταθμό */
.node .n-stars {
  bottom: -19px;
  background: rgba(6, 20, 36, .94);
  color: #ffc846;
  border: 1px solid rgba(255, 200, 70, .5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .6);
  font-weight: 900;
  font-size: .68rem;
  letter-spacing: 1.5px;
  padding: 2px 9px;
  z-index: 2;
}
.node .n-stars i { color: rgba(255, 255, 255, .22); font-style: normal; }

.node.now-month .n-disc { outline: 2px dashed rgba(255, 255, 255, .5); outline-offset: 6px; }
.node.now-month::after { box-shadow: 0 0 14px rgba(255, 200, 70, .9); }

/* ---------- Ο ήρωας πάνω στον χάρτη ---------- */
.hero-marker {
  width: 62px; height: 62px;
  border-radius: 50%;
  overflow: visible;
  border: 0;
  background: none;
  box-shadow: none;
  display: block;
  animation: bob 2.4s ease-in-out infinite;
}
.hero-marker::before {   /* η σκιά του στο χώμα */
  content: '';
  position: absolute;
  left: 50%; bottom: -9px;
  width: 44px; height: 13px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(2, 10, 20, .6), transparent 72%);
}
.hero-marker img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  border: 3px solid var(--gold, #ffc846);
  background: #0b2136;
  box-shadow: 0 0 26px rgba(255, 200, 70, .75), 0 12px 24px rgba(0, 0, 0, .6);
}
.hero-marker.emoji { font-size: 2.2rem; display: grid; place-items: center; }

/* διακοσμητικά: πιο διακριτικά τώρα που υπάρχει πραγματικό φόντο */
.deco { opacity: .5; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }

/* ---------- Κάρτα άσκησης ---------- */
body.game .qcard {
  background: linear-gradient(165deg, rgba(255, 255, 255, .97), #eaf2fa);
  color: #12283f;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .5);
}
body.game .progress-dots i { background: rgba(255, 255, 255, .22); }

/* ---------- Μπάνερ μήνα ---------- */
/* (το παλιό #month-banner ήταν id αντί για class -> ποτέ δεν ίσχυσε·
   το σωστό .month-banner είναι στην ενότητα ΑΝΑΓΝΩΣΙΜΟΤΗΤΑ παρακάτω) */

@media (max-width: 560px) {
  .avatars { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}

/* =========================================================
   ΑΝΑΓΝΩΣΙΜΟΤΗΤΑ — 15/09/2026
   Ο Μάνος: «πιο μεγάλα τα κουτάκια, πιο έντονα και πιο μεγάλα
   τα γράμματα, το κίτρινο χάνεται».
   Είχε δίκιο και δεν ήταν θέμα ματιών: το χρυσό #ffc846 πάνω σε
   ΛΕΥΚΟ φόντο έχει λόγο αντίθεσης ~1.9:1 — κάτω από κάθε όριο
   προσβασιμότητας. Και το κοινό εδώ είναι παιδιά Α' Δημοτικού
   που μόλις μαθαίνουν να διαβάζουν. Λύση: σκούρο φόντο κάτω από
   το χρυσό, και μεγαλύτερα μεγέθη παντού.
   🔴 Οι επιλογείς εδώ μένουν ΜΟΝΟΚΛΑΣΟΙ (.month-banner, όχι
   body.game .month-banner) ώστε το `body.calm ...` του game.css
   να μπορεί ακόμα να υπερισχύει για το πακέτο ΔΕΠΥ.
   ========================================================= */

/* ---------- 1. Κάρτες τάξης / μαθήματος: αισθητά μεγαλύτερες ---------- */
.pick-grid {
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 20px;
}
.pick { padding: 30px 20px 26px; border-radius: 26px; }
body.game .pick .em {
  font-size: 3.6rem;
  margin-bottom: 6px;
}
.pick .nm {
  font-size: 1.24rem;
  margin-top: 8px;
  letter-spacing: -.01em;
}
body.game .pick .mt {
  font-size: .98rem;
  color: #a8c3da;
  margin-top: 3px;
}
.pick .lock { font-size: 1.25rem; top: 12px; right: 14px; }

/* ---------- 2. Μπάνερ μήνα: ΟΧΙ χρυσό σε λευκό ---------- */
.month-banner {
  background: linear-gradient(165deg, #0d2a4a, #081c33);
  border: 1px solid rgba(255, 200, 70, .45);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .5);
  padding: 18px 22px;
  gap: 16px;
  border-radius: 20px;
}
.month-banner .m-em { font-size: 2.3rem; }
.month-banner .m-t {
  font-size: 1.3rem;
  color: #ffd98a;                 /* χρυσό, αλλά πάνω σε σκούρο πια */
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
  line-height: 1.2;
}
.month-banner .m-d {
  font-size: 1.1rem;
  color: #ffffff;
  font-weight: 800;
  margin-top: 2px;
}
.month-banner .m-warn { font-size: .88rem; color: #ffc078; }

/* ---------- 3. Μπάρα χρονιάς ---------- */
.year-bar {
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
  max-width: 640px;
  padding: 18px 20px;
  border-radius: 20px;
}
.year-bar .y-t {
  font-size: 1.12rem;
  color: #ffd98a;
  margin-bottom: 12px;
}
.year-months { gap: 6px; }
.year-months i {
  height: 40px;
  border-radius: 11px;
  font-size: .82rem;
  background: rgba(255, 255, 255, .12);
  color: #cfe0f0;
  border: 1px solid rgba(255, 255, 255, .14);
}
.year-months i.done {
  background: linear-gradient(170deg, #5fd89b, #2aa46c);
  color: #04281a;
  border-color: rgba(255, 255, 255, .45);
}
.year-months i.part {
  background: linear-gradient(170deg, #ffe09a, #f0b02a);
  color: #4a3200;
  border-color: rgba(255, 255, 255, .5);
}
.year-months i.now { outline: 3px solid #ff7a59; outline-offset: 2px; }

/* ---------- 4. Τίτλοι οθόνης λίγο πιο ψηλά σε μέγεθος ---------- */
.screen h2 { font-size: clamp(1.5rem, 3.6vw, 2.15rem); }
.screen .lead { font-size: 1.06rem; color: #bcd4e8; }

/* ---------- 5. Το ΤΩΡΑ πάνω από τον τρέχοντα σταθμό ---------- */
.node.now-month::after {
  font-size: .68rem;
  padding: 3px 11px;
  top: -19px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .6);
}

/* ---------- 6. ΔΕΠΥ: το calm mode γυρίζει σε ανοιχτό φόντο,
   οπότε το κείμενο πρέπει να ξαναγίνει σκούρο για να διαβάζεται ---------- */
body.calm .month-banner { border-color: rgba(0, 0, 0, .18); }
body.calm .month-banner .m-t,
body.calm .year-bar .y-t { color: var(--c-ui-fg); text-shadow: none; }
body.calm .month-banner .m-d { color: var(--c-ui-2); }
body.calm .year-bar {
  background: var(--c-ui-bg);
  border-color: rgba(0, 0, 0, .18);
}
body.calm .year-months i { background: #e4e0d6; color: #5c5c5c; border-color: rgba(0, 0, 0, .12); }
body.game.calm .pick .mt { color: var(--c-ui-2); }

@media (max-width: 560px) {
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .pick { padding: 22px 14px 20px; }
  body.game .pick .em { font-size: 2.9rem; }
  .pick .nm { font-size: 1.1rem; }
  .month-banner .m-t { font-size: 1.14rem; }
  .month-banner .m-d { font-size: 1rem; }
  .year-months i { height: 34px; font-size: .72rem; }
}

/* =========================================================
   ΚΙΝΗΤΟ — η πάνω μπάρα δεν χωρούσε
   Στα 375px τα κουμπιά ⚙️ (Ρυθμίσεις) και 👨‍👩‍👧 (Γονείς) έβγαιναν
   ΕΞΩ από την οθόνη (μετρήθηκε: right=384 και 431 σε πλάτος 375).
   Δηλαδή στο κινητό δεν έφτανες στο πακέτο ΔΕΠΥ. Συμπυκνώνουμε.
   ========================================================= */
@media (max-width: 430px) {
  .topbar { gap: 6px; padding: 8px 9px; }
  .topbar .icon-btn { width: 36px; height: 36px; border-radius: 11px; font-size: 1rem; }
  .topbar .crumb {
    font-size: .92rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar .crumb small { font-size: .66rem; }
  .topbar .pill {
    padding: 5px 9px;
    font-size: .82rem;
    gap: 3px;
  }
}

/* =========================================================
   ΑΝΤΙΘΕΣΗ ΣΕ ΑΝΟΙΧΤΑ ΠΑΝΕΛ
   🔴 Η ΡΙΖΑ: το `body.game { color: #e6f0fa }` παραπάνω κάνει ΟΛΟ το
   κείμενο σχεδόν λευκό. Κάθε πάνελ του game.css που έχει ΑΝΟΙΧΤΟ φόντο
   και δεν ορίζει δικό του `color` κληρονομεί αυτό το λευκό — και γίνεται
   αόρατο. Έτσι χάθηκε το «Μπράβο!» (λευκό πάνω σε #dcfce7).
   Όποτε προσθέτεις πάνελ με ανοιχτό φόντο, δώσ' του ΡΗΤΑ σκούρο color.
   ========================================================= */
.verdict .vt { color: #0f3d24; font-size: 1.55rem; }
.verdict.bad .vt { color: #7a1d1d; }
.verdict .vh { color: #2b3a4d; font-size: 1.08rem; font-weight: 800; }
.verdict.good { background: #d6f8e3; }
.verdict.bad { background: #ffe0e0; }
.verdict { box-shadow: 0 -10px 40px rgba(0, 0, 0, .45); }

.result .box { color: #14283f; }
.result .stat { color: #14283f; }
.stat-card { color: #14283f; }
.answer-box { color: #14283f; }
.numpad button { color: #14283f; }

/* οι λάθος επιλογές έσβηναν υπερβολικά πάνω στο σκούρο σκηνικό */
.opt { color: #14283f; }
.opt.dim { opacity: .62; }

/* =========================================================
   ΟΙ 5 ΠΙΣΤΕΣ ΤΟΥ ΜΗΝΑ — μεγαλύτερα κουτιά
   ========================================================= */
.stage-list { max-width: 660px; gap: 16px; }
.stage {
  padding: 22px 20px;
  gap: 18px;
  border-radius: 24px;
  color: #14283f;
}
.stage .s-ic { width: 66px; height: 66px; border-radius: 21px; font-size: 2rem; }
.stage .s-nm { font-size: 1.22rem; }
.stage .s-bl { font-size: .98rem; margin-top: 4px; }
.stage .s-st { font-size: 1rem; }

/* Κλειδωμένη πίστα: αντί για opacity .5 (που πάνω στο σκούρο σκηνικό
   έκανε το κείμενο δυσανάγνωστο), σκούρο γυάλινο με ΦΩΤΕΙΝΑ γράμματα. */
.stage.locked {
  opacity: 1;
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4);
  color: #cfe0f0;
}
.stage.locked .s-bl { color: #9db6cd; }
.stage.locked .s-ic { background: rgba(255, 255, 255, .12); }

@media (max-width: 560px) {
  .stage { padding: 17px 15px; gap: 13px; }
  .stage .s-ic { width: 54px; height: 54px; font-size: 1.7rem; }
  .stage .s-nm { font-size: 1.08rem; }
  .stage .s-bl { font-size: .9rem; }
  .verdict .vt { font-size: 1.32rem; }
}

/* =========================================================
   🔴 ΣΥΣΤΗΜΑΤΙΚΗ ΔΙΟΡΘΩΣΗ ΑΝΤΙΘΕΣΗΣ — διάβασέ το πριν προσθέσεις πάνελ
   Το `body.game { color:#e6f0fa }` στην κορυφή κάνει ΟΛΟ το κείμενο
   σχεδόν λευκό. ΚΑΘΕ πάνελ του game.css που έχει ΑΝΟΙΧΤΟ φόντο και δεν
   ορίζει δικό του `color` κληρονομεί αυτό το λευκό και γίνεται αόρατο.
   Χάθηκαν έτσι, ένα-ένα: το «Μπράβο!», και οι επικεφαλίδες των Ρυθμίσεων.
   Παρακάτω είναι ΟΛΑ τα ανοιχτά πάνελ μαζί, ώστε να μην ξαναβγεί το ίδιο.
   ΑΝ ΠΡΟΣΘΕΣΕΙΣ ΝΕΟ ΠΑΝΕΛ ΜΕ ΑΝΟΙΧΤΟ ΦΟΝΤΟ, ΒΑΛ' ΤΟ ΕΔΩ.
   (Εξαιρούνται όσα έγιναν σκούρα επίτηδες: .month-banner, .year-bar.)
   ========================================================= */
.opt-row,
.qcard,
.chip,
.break-card,
.slots,
.result .box,
.result .stat,
.stat-card,
.stage,
.answer-box,
.numpad button,
.opt {
  color: #14283f;
}

/* ---------- Ρυθμίσεις: επικεφαλίδες + μεγαλύτερα γράμματα ---------- */
.opt-row { padding: 18px 20px; border-radius: 20px; margin-bottom: 12px; gap: 16px; }
.opt-row .o-i { font-size: 1.9rem; }
.opt-row .o-t { color: #14283f; font-size: 1.15rem; }
.opt-row .o-d { color: #4a5c73; font-size: .96rem; margin-top: 3px; }

/* ---------- Άσκηση: πιο ευανάγνωστη ερώτηση ---------- */
.qcard .q { font-size: 1.36rem; }
.qcard .visual.small { font-size: 1.75rem; }

/* ---------- Διάλειμμα κίνησης ---------- */
.break-card .b-t, .break-card h2 { color: #14283f; }

/* =========================================================
   🔊 ΚΟΥΜΠΙ «ΑΚΟΥΣΕ»
   Μεγάλο και ευδιάκριτο: το πατάει παιδί 6 ετών που δεν διαβάζει
   ακόμα, άρα πρέπει να το βρίσκει χωρίς να ψάχνει.
   ========================================================= */
.say-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 16px auto 2px;
  padding: 13px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7ddcf2, #2ba7c8);
  color: #05303d;
  font-weight: 900;
  font-size: 1.05rem;
  box-shadow: 0 5px 0 #1b7e99, 0 10px 24px rgba(0, 0, 0, .35);
  transition: transform .12s, box-shadow .12s;
}
.say-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #1b7e99; }
.say-btn .say-ic { font-size: 1.35rem; line-height: 1; }
.say-btn.saying { animation: sayPulse .9s ease-out; }
@keyframes sayPulse {
  0%   { box-shadow: 0 5px 0 #1b7e99, 0 0 0 0 rgba(125, 220, 242, .75); }
  100% { box-shadow: 0 5px 0 #1b7e99, 0 0 0 26px rgba(125, 220, 242, 0); }
}
/* κεντραρισμένο μέσα στην κάρτα της άσκησης */
.qcard .say-btn { display: flex; width: -moz-fit-content; width: fit-content; }
/* στο ήρεμο πακέτο ΔΕΠΥ: χωρίς παλμό, ίδια λειτουργία */
body.calm .say-btn { animation: none; box-shadow: 0 4px 0 #1b7e99; }
body.calm .say-btn.saying { animation: none; }

/* δύο κουμπιά ήχου δίπλα-δίπλα: εκφώνηση + επιλογές */
.say-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0 2px;
}
.say-row .say-btn { margin: 0; }
.say-btn.alt {
  background: linear-gradient(180deg, #ffe9a8, #f0b02a);
  color: #4a3200;
  box-shadow: 0 5px 0 #b07f12, 0 10px 24px rgba(0, 0, 0, .35);
}
.say-btn.alt:active { box-shadow: 0 1px 0 #b07f12; }
.say-btn.alt.saying { animation: sayPulseAlt .9s ease-out; }
@keyframes sayPulseAlt {
  0%   { box-shadow: 0 5px 0 #b07f12, 0 0 0 0 rgba(255, 210, 100, .75); }
  100% { box-shadow: 0 5px 0 #b07f12, 0 0 0 26px rgba(255, 210, 100, 0); }
}
@media (max-width: 430px) {
  .say-btn { padding: 11px 18px; font-size: .96rem; }
  .say-row { gap: 8px; }
}

/* =========================================================
   🖱️ Η ΑΠΑΝΤΗΣΗ ΠΟΥ ΜΙΛΑΕΙ
   Όσο ο κέρσορας στέκεται πάνω σε μια απάντηση, εκείνη διαβάζεται.
   Το παιδί πρέπει να ΒΛΕΠΕΙ ποια μιλάει, αλλιώς αν έχει προλάβει να
   μετακινήσει το ποντίκι δεν ξέρει τι άκουσε.
   ========================================================= */
.opt.saying-opt,
.chip.saying-opt {
  outline: 4px solid #2ba7c8;
  outline-offset: 2px;
  background: #e8f8fd;
  color: #05303d;
}
.opt.saying-opt::after {
  content: '🔊';
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: .9rem;
  opacity: .8;
}
.opt { position: relative; }
/* όταν έχει ήδη απαντηθεί, το χρώμα της κρίσης έχει τον λόγο */
.opt.correct.saying-opt,
.opt.wrong.saying-opt { background: inherit; color: #fff; }

/* =========================================================
   🏝️ ΟΙ ΣΤΑΘΜΟΙ ΠΑΝΩ ΣΤΟ ΚΙΝΗΜΑΤΟΓΡΑΦΙΚΟ ΝΗΣΙ

   🔴 ΤΙ ΕΓΙΝΕ 16/09/2026: ένα deploy ανέβασε ΠΑΛΙΑ CSS πάνω από τον νέο
   χάρτη. Ο `cinematicmap.js` έφτιαχνε κανονικά και τους 10 σταθμούς, αλλά
   χωρίς `position:absolute` έπεφταν κάτω από τον καμβά, μέσα σε ένα
   `overflow:hidden` — δηλαδή εξαφανίζονταν. Το νησί φαινόταν, τα κουμπιά
   όχι, και δεν ξεκινούσε τίποτα.

   🔴 ΤΟ `transform` ΤΟ ΟΡΙΖΕΙ ΤΟ JS (`updateNodes()` βάζει inline
   `translate(-50%,-50%) scale(...)` σε κάθε καρέ). ΜΗΝ βάλεις εδώ
   transform για hover — θα το έτρωγε το inline. Χρησιμοποίησε filter.
   Για τον ίδιο λόγο ΟΧΙ αρνητικά margin για κεντράρισμα.
   ========================================================= */
.cinematic-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.cinematic-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;      /* ο καμβάς από κάτω πρέπει να δέχεται σύρσιμο */
  overflow: visible;
}

.cinematic-node {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: auto;      /* ...αλλά ο ίδιος ο σταθμός πατιέται */
  width: 74px;
  height: 74px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #12283f;
  cursor: pointer;
  transition: filter .18s ease, opacity .18s ease;
  will-change: left, top, transform;
}

/* ο δίσκος ζωγραφίζεται με ::before ώστε να μένει ελεύθερο το transform */
.cinematic-node::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(170deg, #f2f7fc 0%, #c3d4e4 52%, #93aabf 100%);
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow:
    0 0 0 4px rgba(6, 22, 40, .5),
    0 8px 0 rgba(8, 26, 46, .62),
    0 16px 30px rgba(0, 0, 0, .55),
    inset 0 -8px 16px rgba(10, 30, 52, .3),
    inset 0 5px 10px rgba(255, 255, 255, .6);
}

.cinematic-node .cn-icon {
  position: relative;
  font-size: 1.7rem;
  line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
}

/* ο αριθμός του σταθμού, σε μετάλλιο κάτω δεξιά */
.cinematic-node > b {
  position: absolute;
  right: -4px;
  bottom: -2px;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #12283f;
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
  border: 2px solid rgba(255, 255, 255, .92);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5);
}

.cinematic-node .cn-stars {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .62rem;
  letter-spacing: -1px;
  white-space: nowrap;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}

/* ο ήρωας στέκεται δίπλα στον τρέχοντα σταθμό */
.cinematic-node .cn-hero {
  position: absolute;
  left: -26px;
  bottom: -6px;
  font-size: 1.6rem;
  font-style: normal;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
  animation: cnHeroBob 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cnHeroBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---- ολοκληρωμένος ---- */
.cinematic-node.done::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(170deg, #8df0bd 0%, #3cc98a 52%, #1d8a5c 100%);
  box-shadow:
    0 0 0 4px rgba(6, 40, 28, .5),
    0 8px 0 #14663f,
    0 16px 30px rgba(0, 0, 0, .5),
    0 0 26px rgba(80, 230, 160, .45),
    inset 0 -8px 16px rgba(8, 60, 38, .35),
    inset 0 5px 10px rgba(255, 255, 255, .55);
}

/* ---- ο τρέχων: εδώ πρέπει να πάει το μάτι του παιδιού ---- */
.cinematic-node.current::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(170deg, #fff2c4 0%, #ffc846 50%, #d88f12 100%);
  border-color: #fffaeb;
  box-shadow:
    0 0 0 4px rgba(60, 34, 2, .45),
    0 8px 0 #a4690e,
    0 16px 32px rgba(0, 0, 0, .5),
    0 0 38px rgba(255, 190, 60, .7),
    inset 0 -8px 16px rgba(90, 56, 4, .3),
    inset 0 5px 10px rgba(255, 255, 255, .65);
}
/* φωτοστέφανο που «ανασαίνει» — μόνο στον τρέχοντα */
.cinematic-node.current-stop::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 3px solid rgba(255, 205, 90, .85);
  animation: cnHalo 1.9s ease-out infinite;
  pointer-events: none;
}
@keyframes cnHalo {
  0%   { opacity: .9; transform: scale(.82); }
  100% { opacity: 0;  transform: scale(1.25); }
}

/* ---- κλειδωμένος ---- */
.cinematic-node.locked {
  cursor: not-allowed;
  opacity: .82;
}
.cinematic-node.locked::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(170deg, #b9c3cd 0%, #7d8b99 52%, #56626e 100%);
  box-shadow:
    0 0 0 4px rgba(10, 18, 26, .45),
    0 6px 0 rgba(30, 40, 50, .6),
    0 12px 24px rgba(0, 0, 0, .45),
    inset 0 -8px 16px rgba(20, 30, 40, .35);
}
.cinematic-node.locked .cn-icon { font-size: 1.35rem; }

/* πανηγυρισμός όταν ξεκλειδώνει ο σταθμός (CinematicMap.cheer) */
.cinematic-node.cheer::before {
  animation: cnCheer .7s ease-out 2;
}
@keyframes cnCheer {
  0%, 100% { box-shadow: 0 0 0 4px rgba(60, 34, 2, .45), 0 8px 0 #a4690e, 0 0 30px rgba(255, 190, 60, .7); }
  50%      { box-shadow: 0 0 0 9px rgba(255, 214, 110, .55), 0 8px 0 #a4690e, 0 0 60px rgba(255, 210, 90, .95); }
}

.cinematic-node:hover { filter: brightness(1.09) saturate(1.06); }
.cinematic-node:active { filter: brightness(.94); }
.cinematic-node:focus-visible {
  outline: 4px solid #7ddcf2;
  outline-offset: 4px;
}

/* ΔΕΠΥ / ήρεμη λειτουργία: μένουν ΟΛΑ, φεύγει μόνο η κίνηση */
.cinematic-calm .cinematic-node.current-stop::after,
.cinematic-calm .cinematic-node .cn-hero,
body.reduce-motion .cinematic-node.current-stop::after,
body.reduce-motion .cinematic-node .cn-hero { animation: none; }

/* ---- η μπάρα χειρισμού του χάρτη ---- */
.map3d-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.map3d-controls button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 26, 42, .82);
  color: #eaf6ff;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
  transition: background .15s, transform .12s;
}
.map3d-controls button:hover { background: rgba(20, 48, 74, .95); }
.map3d-controls button:active { transform: translateY(2px); }

@media (max-width: 560px) {
  .cinematic-node { width: 60px; height: 60px; }
  .cinematic-node .cn-icon { font-size: 1.4rem; }
  .cinematic-node > b { min-width: 21px; height: 21px; font-size: .74rem; }
  .map3d-controls button span { display: none; }
  .map3d-controls button { padding: 7px 10px; }
}