/* ════════════════════════════════════════════════════════════════════
   polytonic-side.css — Το πολυτονικό πληκτρολόγιο στο πλάι, ανοιχτό

   ΤΙ ΣΥΝΕΒΑΙΝΕ: σε κάθε άσκηση συμπλήρωσης το πληκτρολόγιο ήταν ΣΥΡΤΑΡΙ
   — κλειστό, με βελάκι, κάτω από το πεδίο. Ο μαθητής έπρεπε να το ανοίξει
   κάθε φορά, κι όταν άνοιγε έσπρωχνε την άσκηση προς τα πάνω. Σε οθόνη
   1900px ο χώρος δεξιά και αριστερά ήταν άδειος.

   ΔΥΟ ΟΙΚΟΓΕΝΕΙΕΣ, μετρημένες στον κώδικα — δεν υπάρχει ένα πληκτρολόγιο,
   υπάρχουν τέσσερα αντίγραφα με διαφορετικά προθέματα:

     .lpoly-*    games/shared-engine.js → lyo · paratheta · epitheta ·
                 noun-fill · ousiastika · antonymies
                 Ζει ΜΕΣΑ στην κάρτα, στο .lfi-wrap, δίπλα στο πεδίο.
     #eimi-kb-wrap · #kr-kb-wrap · #arv-kb-wrap
                 eimi · klisi-rimaton · anwmala-rimata
                 Ζει ΕΞΩ από την κάρτα, ως sticky μπάρα στον πάτο του
                 overlay-frame, σε όλο το πλάτος.

   Η πρώτη γίνεται δεύτερη στήλη του ίδιου grid. Η δεύτερη γίνεται στήλη
   του ίδιου του frame: το frame γίνεται flex, η ενεργή οθόνη παίρνει τον
   χώρο που περισσεύει και το πληκτρολόγιο κάθεται δεξιά, sticky.

   ΓΙΑΤΙ !important ΣΤΗ ΔΕΥΤΕΡΗ ΟΙΚΟΓΕΝΕΙΑ: τα τρία wrappers γράφουν
   `position:sticky;bottom:0;border-top:…;padding:…` ΜΕΣΑ στο style του
   στοιχείου (games/eimi/game.js:847, klisi-rimaton/game.js:627,
   anwmala-rimata/game.js:908). Inline δήλωση δεν νικιέται από αρχείο —
   μόνο από !important. Δεν αγγίζουμε το `display`: αυτό το γυρίζει το
   JS για να δείξει/κρύψει το πληκτρολόγιο, και θα το σπάγαμε.

   ΤΟ ΚΟΥΜΠΙ ΓΙΝΕΤΑΙ ΤΙΤΛΟΣ. Όταν το πληκτρολόγιο είναι μονίμως ανοιχτό,
   ένα βελάκι που υπόσχεται κλείσιμο λέει ψέματα: το βελάκι φεύγει και ο
   δείκτης γίνεται κανονικός. Κάτω από 1180px τίποτα δεν αλλάζει —
   συρτάρι όπως ήταν, γιατί εκεί δεν υπάρχει χώρος στο πλάι.

   Το όριο των 1180px δεν είναι αυθαίρετο: η κάρτα των ασκήσεων είναι
   max-width 720px (games/eimi/game.css:16), οπότε 720 + 340 στήλη + τα
   περιθώρια χωρούν από εκεί και πάνω χωρίς να στριμωχτεί τίποτα.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 1180px) {

  /* ── Α · shared-engine (.lpoly-*) — δεύτερη στήλη μέσα στην κάρτα ── */

  /* Το .lfi-wrap είναι display:none / .active display:block (lyo/game.css:132).
     Κρατάμε τον ίδιο διακόπτη· αλλάζει μόνο ΤΙ γίνεται όταν είναι ενεργό.

     ΤΟ .game-overlay ΔΕΝ ΕΙΝΑΙ ΔΙΑΚΟΣΜΗΤΙΚΟ. Μετρημένο στον browser: με
     σκέτο `.lfi-wrap.active` το display έμενε `block` στα 1600px. Το
     games/lyo/game.css φορτώνεται ΤΕΜΠΕΛΙΚΑ, όταν ανοίγει το παιχνίδι —
     δηλαδή ΜΕΤΑ από αυτό εδώ — και με ίδια ειδικότητα (0,2,0) κερδίζει
     όποιος γράφτηκε τελευταίος. Ο πρόγονος ανεβάζει την ειδικότητα σε
     (0,3,0) και το ζήτημα λύνεται χωρίς !important. */
  .game-overlay .lfi-wrap.active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-areas:
      "stem   kb"
      "submit kb";
    column-gap: 22px;
    align-items: start;
  }
  .game-overlay .lfi-wrap.active > .lstem-display { grid-area: stem; }
  .game-overlay .lfi-wrap.active > .lfi-submit    { grid-area: submit; }
  .game-overlay .lfi-wrap.active > .lpoly-kb      { grid-area: kb; margin-top: 0; }

  /* Ανοιχτό χωρίς κλικ, και το βελάκι δεν υπόσχεται πια κλείσιμο. */
  .game-overlay .lfi-wrap.active > .lpoly-kb .lpoly-body   { display: block; }
  .game-overlay .lfi-wrap.active > .lpoly-kb .lpoly-toggle { cursor: default; pointer-events: none; }
  .game-overlay .lfi-wrap.active > .lpoly-kb .lpoly-arrow  { display: none; }

  /* ── Β · eimi · klisi-rimaton · anwmala-rimata — στήλη του frame ── */

  #eimi-wrap, #kr-wrap, #arv-wrap { display: flex; align-items: flex-start; }

  /* Οι ανενεργές οθόνες είναι display:none, άρα δεν μετράνε ως flex items·
     η ενεργή παίρνει ό,τι περισσεύει. Το min-width:0 είναι που επιτρέπει
     στο κείμενο να αναδιπλωθεί αντί να σπρώξει τη στήλη έξω. */
  #eimi-wrap > .eimi-screen,
  #kr-wrap   > .kr-screen,
  #arv-wrap  > .arv-screen { flex: 1 1 auto; min-width: 0; }

  #eimi-kb-wrap, #kr-kb-wrap, #arv-kb-wrap {
    flex: 0 0 340px;
    width: 340px;
    align-self: stretch;
    position: sticky !important;
    top: 0 !important;
    bottom: auto !important;
    max-height: 100vh;
    overflow-y: auto;
    border-top: none !important;
    border-left: 1px solid #3d3020 !important;
    padding: 16px 16px 20px !important;
  }

  #eimi-poly-body, #kr-poly-body, #arv-poly-body { display: block; }
  #eimi-poly-toggle, #kr-poly-toggle, #arv-poly-toggle { cursor: default; pointer-events: none; }
  .eimi-poly-arrow, .kr-poly-arrow, .arv-poly-arrow { display: none; }
}