/* ============================================================
   puzzle-solve.css — Λύνεις το πρόβλημα βλέποντας τη σκακιέρα
   ------------------------------------------------------------
   1. Το πεδίο της λύσης ανεβαίνει ακριβώς κάτω από τον τίτλο,
      πριν από τη «Βοήθεια» και τη «Λύση».
   2. Υπολογιστής: η σκακιέρα μένει στη θέση της όσο κατεβαίνεις.
   3. Κινητό: μόλις πατήσεις να γράψεις, η σκακιέρα μικραίνει και
      μένει κολλημένη πάνω, οπότε τη βλέπεις όσο πληκτρολογείς.
   Ισχύει και για τη λίστα και για το μεγάλο παράθυρο (μεγέθυνση).
   Για να γυρίσει όπως ήταν: σβήνεις τη γραμμή του από το index.html.
   ============================================================ */

/* Το overflow:hidden δεν αφήνει τη σκακιέρα να «κολλήσει».
   Το clip κόβει το ίδιο, χωρίς να χαλάει το sticky. */
#data-puzzles .puzzle-card,
.pz-dialog .puzzle-card { overflow: clip; }

/* Η σειρά μέσα στη στήλη: τίτλος, στόχος, ΦΟΡΜΑ, βοήθεια, λύση. */
#data-puzzles .puzzle-info,
.pz-dialog .puzzle-info { display: flex; flex-direction: column; }
#data-puzzles .puzzle-info > *,
.pz-dialog .puzzle-info > * { order: 2; }
#data-puzzles .puzzle-info > h3,
.pz-dialog .puzzle-info > h3 { order: 0; }
#data-puzzles .puzzle-info > .puzzle-meta,
.pz-dialog .puzzle-info > .puzzle-meta { order: 1; margin-bottom: 12px; }
#data-puzzles .puzzle-info > .puzzle-hint,
.pz-dialog .puzzle-info > .puzzle-hint { order: 3; margin: 14px 0 0; }
#data-puzzles .puzzle-info > .puzzle-solution,
.pz-dialog .puzzle-info > .puzzle-solution { order: 4; margin: 10px 0 0; }

/* Η φόρμα: πιο μαζεμένη. */
#data-puzzles .puzzle-form,
.pz-dialog .puzzle-form { border-top: 0; padding-top: 0; }
#data-puzzles .puzzle-form .pf-intro,
.pz-dialog .puzzle-form .pf-intro { margin: 0 0 10px; font-size: .86rem; line-height: 1.5; }
#data-puzzles .puzzle-form .pf-row,
.pz-dialog .puzzle-form .pf-row { margin-bottom: 10px; }
#data-puzzles .puzzle-form textarea,
.pz-dialog .puzzle-form textarea { min-height: 76px; font-size: 1rem; }

/* ---------- Υπολογιστής: η σκακιέρα δεν φεύγει ---------- */
@media (min-width: 761px) {
  /* Πιο «βαρύς» επιλογέας + !important: το puzzle-zoom.js βάζει
     position:relative, και τότε το top έσπρωχνε τη σκακιέρα κάτω
     και έκοβε το κουμπί «Μεγέθυνση». */
  #data-puzzles .puzzle-card .puzzle-board {
    position: sticky !important;
    top: calc(var(--header-h, 84px) + 12px);
    align-self: start;
  }
  .pz-dialog .puzzle-board {
    position: sticky;
    top: 64px;
    align-self: start;
  }
}

/* ---------- Κινητό: η σκακιέρα πάνω, όσο γράφεις ---------- */
@media (max-width: 760px) {
  #data-puzzles .puzzle-card:focus-within .puzzle-board,
  .pz-dialog .puzzle-card:focus-within .puzzle-board {
    position: sticky;
    z-index: 6;
    top: var(--header-h, 68px);
    padding: 6px 0 8px;
    background: #f4efe4;
    box-shadow: 0 10px 12px -10px rgba(40, 25, 10, .45);
  }
  .pz-dialog .puzzle-card:focus-within .puzzle-board {
    top: var(--pz-top, 56px);
    background: #fffdf9;
  }
  #data-puzzles .puzzle-card:focus-within .puzzle-board svg,
  .pz-dialog .puzzle-card:focus-within .puzzle-board svg {
    width: min(62vw, 290px);
    margin: 0 auto;
  }
  #data-puzzles .puzzle-card:focus-within .puzzle-board .pz-enlarge-hint { display: none !important; }

  /* Όταν ο browser φέρνει το πεδίο στην οθόνη, να μην το κρύβει η σκακιέρα. */
  #data-puzzles .puzzle-form input,
  #data-puzzles .puzzle-form textarea,
  .pz-dialog .puzzle-form input,
  .pz-dialog .puzzle-form textarea {
    scroll-margin-top: calc(var(--header-h, 68px) + min(62vw, 290px) + 34px);
  }
}