/* ============================================================================
   Κοινό UI — ενιαίο header (eduhead) για όλα τα παιχνίδια
   ----------------------------------------------------------------------------
   Στυλ εμπνευσμένο από glossa/english. Το eduhead μπαίνει στην κορυφή κάθε
   παιχνιδιού από το shared/gamebar.js. Τα native headers του κάθε παιχνιδιού
   κρύβονται (αλλά μένουν στο DOM για proxy των κουμπιών — ήχος κ.λπ.).
   ========================================================================== */

/* Κρύψε το native header κάθε παιχνιδιού όταν είναι ενεργό το eduhead */
body.eduhead-on header.topbar { display: none !important; }
body.eduhead-on .meander-strip { display: none !important; }

/* ---------------------------------------------------------------------------
   ΕΝΙΑΙΟ ΦΟΝΤΟ — ίδιο σε ΟΛΑ τα παιχνίδια (όπως glossa/english).
   Το body.eduhead-on (το βάζει το gamebar.js) έχει μεγαλύτερη specificity
   από το σκέτο body{} κάθε παιχνιδιού, άρα υπερισχύει ΧΩΡΙΣ αλλαγή per-game CSS.
   Ένα σημείο αλήθειας για το «από το background».
   --------------------------------------------------------------------------- */
body.eduhead-on{
  background:
    radial-gradient(1200px 600px at 80% -10%, #fffdf6 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #fdeccd 0%, transparent 55%),
    #fff8ec !important;
  background-attachment: fixed !important;
}
/* Σβήσε per-game διακοσμητικά φόντου (π.χ. πυξίδα/μαίανδρος) που σπάνε την ομοιομορφία */
body.eduhead-on::before{ display: none !important; }

/* ---------------------------------------------------------------------------
   ΕΝΙΑΙΟ CONTAINER — ίδιο πλάτος/περιθώρια/padding σε ΟΛΑ τα παιχνίδια,
   ακριβώς όπως η Γλώσσα (#app max-width:920px, κεντραρισμένο). Ένα σημείο
   αλήθειας ώστε οι κάρτες να έχουν ίδιο πλάτος & στοίχιση παντού.
   Καλύπτει #app (glossa/english/maths/history) και .wrap (geografia).
   --------------------------------------------------------------------------- */
body.eduhead-on #app,
body.eduhead-on .wrap{
  position:relative; z-index:1; width:100%;
  max-width:920px !important; margin:0 auto !important; padding:22px 18px 40px !important;
}

/* ---------------------------------------------------------------------------
   ΕΝΙΑΙΑ ΠΑΛΕΤΑ & ΓΡΑΜΜΑΤΟΣΕΙΡΑ — επαναπροσδιορισμός των per-game CSS vars
   κάτω από body.eduhead-on (υπερισχύει του :root κάθε παιχνιδιού, αφού το body
   είναι απόγονος του html). Έτσι ΟΛΕΣ οι οθόνες (start, κουιζ, αποτελέσματα,
   κουμπιά) παίρνουν αυτόματα την παλέτα της Γλώσσας — χωρίς αλλαγή per-component.
   ΔΕΝ πειράζουμε τα γεωγραφικά χρώματα του χάρτη (--sea/--land/--sand) ώστε ο
   χάρτης να παραμένει χάρτης.
   --------------------------------------------------------------------------- */
body.eduhead-on{
  /* γραμματοσειρά: kill Comic Sans (geografia) & Georgia serif (history) */
  --font:      "Baloo 2","Quicksand","Segoe UI","Helvetica Neue",-apple-system,"Noto Sans Greek","DejaVu Sans",system-ui,sans-serif !important;
  --font-body: "Baloo 2","Quicksand","Segoe UI","Helvetica Neue",-apple-system,"Noto Sans Greek","DejaVu Sans",system-ui,sans-serif !important;
  --font-head: "Baloo 2","Quicksand","Segoe UI","Helvetica Neue",-apple-system,"Noto Sans Greek","DejaVu Sans",system-ui,sans-serif !important;

  /* μελάνι/χαρτί — κοινά */
  --ink:#1f2a44 !important; --ink-soft:#41507a !important;
  --paper:#fff8ec !important; --parchment:#fff8ec !important;

  /* accents → παλέτα Γλώσσας (teal/gold/terracotta/leaf) */
  --gold:#e8a838 !important; --gold-dk:#c9871d !important; --gold-deep:#c9871d !important; --gold-dark:#c9871d !important;
  --clay:#d9694a !important; --clay-dk:#b8543a !important;          /* history terracotta */
  --terracotta:#d9694a !important; --red:#d9534f !important;
  --leaf:#5fa34a !important; --green-ok:#5fa34a !important; --ok:#5fa34a !important;
  --teal:#0f7d7d !important; --aegean:#0f7d7d !important; --aegean-dk:#0a5c5c !important;
}

/* ---------------------------------------------------------------------------
   ΕΝΙΑΙΑ COMPONENTS — κουμπιά / κάρτες / inputs / avatars σαν τη Γλώσσα,
   σε ΟΛΕΣ τις οθόνες. Κάθε παιχνίδι αντλεί το κουμπί του από διαφορετική
   μεταβλητή, οπότε εδώ κάνουμε override απευθείας το look.
   --------------------------------------------------------------------------- */
/* Κουμπιά: teal 3D (base .btn) */
body.eduhead-on .btn{
  font-family:var(--edu-font) !important; font-weight:800 !important; color:#fff !important;
  border:none !important; border-radius:14px !important;
  background:linear-gradient(180deg,#0f7d7d,#0a5c5c) !important;
  box-shadow:0 5px 0 #0a5c5c, var(--edu-shadow) !important;
}
body.eduhead-on .btn:hover{ filter:brightness(1.05); }
body.eduhead-on .btn:active{ transform:translateY(3px) !important; box-shadow:0 2px 0 #0a5c5c, var(--edu-shadow) !important; }
/* χρυσή παραλλαγή (κρατάμε χρυσό για «πρωτεύον» CTA όπου υπάρχει .gold) */
body.eduhead-on .btn.gold{
  background:linear-gradient(180deg,#e8a838,#c9871d) !important;
  box-shadow:0 5px 0 #c9871d, var(--edu-shadow) !important;
}
/* ghost / outline */
body.eduhead-on .btn.ghost{
  background:transparent !important; color:var(--edu-ink) !important;
  border:2px solid var(--edu-ink) !important; box-shadow:none !important;
}

/* Κάρτες περιεχομένου/έναρξης σαν glossa .card.
   .start-card: maths/geografia · history: η ίδια η .start-screen είναι κάρτα. */
body.eduhead-on .card,
body.eduhead-on .start-card,
body.eduhead-on .map-panel,
body.eduhead-on .quiz-panel,
body.eduhead-on[data-edugame="history"] .start-screen{
  background:var(--edu-parchment) !important;
  border:2px solid var(--edu-paper-line) !important;
  border-radius:var(--edu-radius) !important;
  box-shadow:var(--edu-shadow) !important;
}

/* Inputs */
body.eduhead-on .name-input,
body.eduhead-on .text-input,
body.eduhead-on #name-input{
  border:2px solid var(--edu-paper-line) !important; background:#fffdf7 !important;
  color:var(--edu-ink) !important; border-radius:12px !important; font-family:var(--edu-font) !important;
}

/* Avatar επιλογές */
body.eduhead-on .avatar-pick,
body.eduhead-on .avatar-card,
body.eduhead-on .avatars .avatar,
body.eduhead-on .avatar-opt{
  background:#fffdf7 !important; border:2px solid var(--edu-paper-line) !important; border-radius:14px !important;
}
body.eduhead-on .avatar-pick.sel,
body.eduhead-on .avatar-card.selected,
body.eduhead-on .avatars .avatar.sel,
body.eduhead-on .avatar-opt.selected{
  border-color:var(--edu-gold) !important; background:#fff3d8 !important;
}

.eduhead{
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px;
  background: linear-gradient(180deg, #10243e, #27325a);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
.eduhead *{ box-sizing: border-box; }

.eduhead-left, .eduhead-right{ display: flex; align-items: center; gap: 8px; min-width: 0; }

/* avatar + όνομα παίκτη */
.eduhead .eh-avatar{
  font-size: 1.5rem; background: rgba(255,255,255,.16); border-radius: 50%;
  width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto;
}
.eduhead .eh-name{ font-weight: 700; font-size: 1.02rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }

/* στατιστικά */
.eduhead .eh-stat{ background: rgba(255,255,255,.13); padding: 6px 11px;
  border-radius: 999px; font-size: .95rem; white-space: nowrap; }
.eduhead .eh-stat b{ font-size: 1.02rem; }

/* κουμπιά εικονιδίων */
.eduhead .eh-btn{
  border: none; cursor: pointer; background: rgba(255,255,255,.16); color: #fff;
  height: 40px; min-width: 40px; padding: 0 12px; border-radius: 12px;
  font-size: 1.1rem; font-family: inherit; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .12s, background .15s;
}
.eduhead .eh-btn:hover{ background: rgba(255,255,255,.30); transform: translateY(-2px); }
.eduhead .eh-btn:active{ transform: scale(.93); }
.eduhead .eh-btn .lbl{ font-size: .95rem; }
@media (max-width: 560px){ .eduhead .eh-btn .lbl{ display: none; } .eduhead .eh-name{ max-width: 22vw; } }

/* dropdown εναλλαγής μαθήματος */
.eh-switch{ position: relative; }
.eh-menu{
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: #fff; color: #10243e; border-radius: 16px; padding: 8px;
  box-shadow: 0 18px 44px rgba(0,0,0,.3); display: none; z-index: 70;
}
.eh-switch.open .eh-menu{ display: block; }
.eh-menu a, .eh-menu button{
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  text-decoration: none; color: #10243e; background: none; border: none; cursor: pointer;
  padding: 9px 11px; border-radius: 10px; font: inherit; font-size: .98rem;
}
.eh-menu a:hover, .eh-menu button:hover{ background: #f1f3ff; }
.eh-menu a.current{ background: #eef0ff; font-weight: 700; }
.eh-menu .eh-ic{ font-size: 1.25rem; width: 26px; text-align: center; }
.eh-menu .eh-sep{ height: 1px; background: #eef0f5; margin: 6px 4px; }
.eh-menu .eh-hub{ font-weight: 700; }

/* ===========================================================================
   ΚΟΙΝΟ COMPONENT — σελίδα «επιλογής αποστολής» ίδια σε ΟΛΑ τα παιχνίδια.
   Καθρεφτίζει το look της Γλώσσας. Παλέτα σκληροκωδικοποιημένη (το ui.css δεν
   έχει τα per-game vars). Πρόσθεσε αυτές τις κλάσεις ΔΙΠΛΑ στις υπάρχουσες
   (additive) — χωρίς μετονομασία, ώστε logic/tests να μένουν ανέπαφα.
   Όλα prefixed με body.eduhead-on => υπερισχύουν των per-game κανόνων (specificity).
   =========================================================================== */
:root{
  --edu-parchment:#fff8ec; --edu-parchment-2:#f6ead1; --edu-paper-line:#e7d9bd;
  --edu-ink:#1f2a44; --edu-ink-soft:#6b6353; --edu-teal:#0a5c5c;
  --edu-gold:#e8a838; --edu-terracotta:#d9694a;
  --edu-shadow:0 8px 22px rgba(31,42,68,.16); --edu-shadow-lg:0 16px 40px rgba(31,42,68,.22);
  --edu-radius:18px;
  --edu-font:"Baloo 2","Quicksand","Segoe UI","Helvetica Neue",-apple-system,"Noto Sans Greek","DejaVu Sans",system-ui,sans-serif;
}
/* Τιμές ΑΚΡΙΒΩΣ ίδιες με glossa/english (.screen-title / .muted) — ένα look παντού */
body.eduhead-on .edu-greet{ font-size:clamp(1.4rem,5vw,2rem); margin:0 0 4px; color:var(--edu-ink); font-weight:700; font-family:var(--edu-font); }
body.eduhead-on .edu-intro{ color:var(--edu-ink-soft); margin:1em 0; font-family:var(--edu-font); }
body.eduhead-on .stars-total{
  display:inline-block; font-family:var(--edu-font); font-weight:700;
  color:var(--edu-teal); background:var(--edu-parchment-2);
  padding:4px 12px; border-radius:999px; margin:0 0 4px; font-size:.95rem;
}
body.eduhead-on .stars-total b{ color:var(--edu-terracotta); }
body.eduhead-on .edu-grid{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important; gap:16px; margin-top:18px; }
body.eduhead-on .edu-grid.edu-list{ grid-template-columns:1fr !important; gap:12px; }
body.eduhead-on .edu-card{
  position:relative; display:block; cursor:pointer; text-align:left; width:100%;
  background:var(--edu-parchment); border:2px solid var(--edu-paper-line); border-radius:var(--edu-radius);
  padding:18px; box-shadow:var(--edu-shadow); font-family:var(--edu-font); color:var(--edu-ink);
  transition:transform .14s, box-shadow .14s, border-color .14s; overflow:hidden;
}
body.eduhead-on .edu-card:hover{ transform:translateY(-5px); box-shadow:var(--edu-shadow-lg); border-color:var(--edu-gold); }
body.eduhead-on .edu-card .ec-emoji{ font-size:2.6rem; line-height:normal; }
body.eduhead-on .edu-card .ec-title{ margin:8px 0 2px; font-size:1.2rem; font-weight:700; display:block; color:var(--edu-ink); }
/* Δέσμευση χώρου 2 γραμμών για τον τίτλο → ίδιο ύψος κάρτας ακόμη κι όταν ο
   τίτλος τυλίγεται. Σταθερό line-height για ταυτόσημο ύψος Γλώσσα↔Μαθηματικά. */
body.eduhead-on .edu-card .ec-title,
body.eduhead-on .world-card h3{
  line-height:1.2 !important; min-height:2.4em !important;
}
body.eduhead-on .edu-card .ec-sub{ color:var(--edu-ink-soft); font-size:.92rem; }
/* Δέσμευση χώρου 2 γραμμών για το subtitle (σταθερό line-height ώστε 1 & 2 γραμμές
   να έχουν ίδιο ύψος) → ίδιο ύψος κάρτας Γλώσσα↔Μαθηματικά↔Γεωγραφία. */
body.eduhead-on .edu-card .ec-sub,
body.eduhead-on .world-card .wc-sub{
  line-height:1.3 !important; min-height:2.6em !important;
}
body.eduhead-on .edu-card .ec-bar{ height:10px; background:var(--edu-parchment-2); border-radius:999px; margin-top:12px; overflow:hidden; }
body.eduhead-on .edu-card .ec-bar > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--edu-gold),var(--edu-terracotta)); border-radius:999px; transition:width .6s; }
body.eduhead-on .edu-card .ec-meta{ display:flex; justify-content:space-between; align-items:center; font-size:.85rem; margin-top:6px; color:var(--edu-teal); font-weight:700; }
body.eduhead-on .edu-card .ec-badge{ position:absolute; top:10px; right:10px; font-size:1.4rem; filter:drop-shadow(0 2px 2px rgba(0,0,0,.2)); }

/* ===========================================================================
   ΔΙΑΚΟΣΜΗΤΙΚΟ ΦΟΝΤΟ — floating symbols/letters.
   Κάθε παιχνίδι βάζει τα δικά του σύμβολα στο HTML ως:
     <div class="bg-decor" aria-hidden="true">
       <span class="float f1">+</span>...<span class="float f9">√</span>
     </div>
   Το CSS είναι κοινό εδώ. Το body.eduhead-on prefix εξασφαλίζει ότι
   υπερισχύει αν κάποιο παιχνίδι ορίζει δικό του .bg-decor (π.χ. Γλώσσα).
   =========================================================================== */
body.eduhead-on .bg-decor{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
body.eduhead-on .bg-decor .float{
  position:absolute; font-weight:800; color:var(--edu-ink);
  opacity:.05; font-size:8vmax; user-select:none;
  animation:edu-bob 9s ease-in-out infinite;
}
.f1{ left:6%;  top:14%; } .f2{ left:84%; top:10%; animation-delay:.6s; }
.f3{ left:18%; top:70%; animation-delay:1.2s; } .f4{ left:72%; top:64%; animation-delay:1.8s; }
.f5{ left:46%; top:8%;  animation-delay:2.4s; } .f6{ left:90%; top:46%; animation-delay:3s; }
.f7{ left:30%; top:40%; animation-delay:3.6s; } .f8{ left:60%; top:84%; animation-delay:4.2s; }
.f9{ left:10%; top:46%; animation-delay:4.8s; }
@keyframes edu-bob{ 0%,100%{ transform:translateY(0) rotate(-4deg);} 50%{ transform:translateY(-18px) rotate(4deg);} }

/* ===========================================================================
   Ιστορία — station cards.
   Δεν χρησιμοποιούμε edu-card (θα άλλαζε display:block → έσπαγε το flex row).
   Override χρωμάτων & γραμματοσειράς μόνο, κρατώντας ακέραιο το layout.
   =========================================================================== */
body.eduhead-on .trail .station{
  background:var(--edu-parchment); border-color:var(--edu-paper-line);
  border-radius:var(--edu-radius); box-shadow:var(--edu-shadow);
  font-family:var(--edu-font);
}
body.eduhead-on .trail .station:hover:not(.locked){
  border-color:var(--edu-gold); transform:translateY(-3px); box-shadow:var(--edu-shadow-lg);
}
body.eduhead-on .station-name{ font-family:var(--edu-font) !important; font-size:1.15rem; color:var(--edu-ink); }
body.eduhead-on .station-num{ color:var(--edu-teal); font-family:var(--edu-font); }
body.eduhead-on .station-desc{ color:var(--edu-ink-soft); font-family:var(--edu-font); }
body.eduhead-on .map-title{ font-family:var(--edu-font) !important; color:var(--edu-ink); }
body.eduhead-on .map-sub{ font-family:var(--edu-font); color:var(--edu-ink-soft); }
body.eduhead-on .progress-label{ font-family:var(--edu-font); color:var(--edu-ink-soft); }
/* period χρονολογία pill */
body.eduhead-on .station-period{
  display:inline-block; font-size:.72rem; font-family:var(--edu-font);
  color:var(--edu-teal); font-weight:700;
  background:var(--edu-parchment-2); padding:2px 8px;
  border-radius:999px; margin-top:4px; letter-spacing:.3px;
}
/* μονοπάτι — colored left border ανά κατάσταση σταθμού */
body.eduhead-on .trail .station{ border-left-width:5px !important; }
body.eduhead-on .trail .station.locked{ border-left-color:var(--edu-paper-line) !important; }
body.eduhead-on .trail .station:not(.locked){ border-left-color:var(--edu-gold) !important; }
body.eduhead-on .trail .station.done{ border-left-color:var(--edu-terracotta) !important; }