/* ΣΤΑΥΡΟΛΕΞΟ LUBEN — Summer 26
   Λευκές σελίδες. Το magenta μπαίνει σε τόνους: όσο πιο μεγάλη η επιφάνεια,
   τόσο πιο ξεπλυμένο το χρώμα. Πλήρης κορεσμός μόνο σε μικρές λεπτομέρειες. */

/* Δηλώνουμε ρητά ότι η σελίδα έχει τη δική της παλέτα και ΔΕΝ θέλει το
   αυτόματο σκοτείνιασμα του browser. Το «only» απενεργοποιεί τη βεβιασμένη
   αντιστροφή στο Android -- σκέτο «light» δεν αρκεί. */
:root{color-scheme:only light}
:root{
  --bg:#2a2a2f;              /* το γκρι γύρω από το τεύχος */
  --cover-bleed:#f2eff3;     /* γεμίζει γύρω από το artboard 3:4 του εξωφύλλου */
  --page:#ffffff;
  --page-2:#faf7f9;
  --ink-1:#141418;           /* κείμενο */
  --ink-2:#5c5c68;           /* δευτερεύον */
  --ink-3:#9a9aa6;           /* απαλό */
  --rule:#15151a;            /* γραμμές πλέγματος */
  --hair:#e4e4ea;            /* λεπτές γραμμές UI */

  /* Κόκκινο του εξωφύλλου, σε κλίμακα — από ξεπλυμένο σε πλήρες.
     Χρησιμοποιείται για chrome: μπάρες, αριθμούς, κουμπιά. */
  --m-05:#fff2f4;
  --m-10:#ffe4e7;
  --m-20:#ffc9d0;
  --m-40:#ff8e9a;
  --m-60:#fc5568;
  --m-100:#fb2d46;
  --m-ink:#c8102a;           /* κόκκινο αρκετά σκούρο για κείμενο σε λευκό */

  /* Κίτρινο του εξωφύλλου — δείχνει ΠΟΥ είσαι μέσα στο πλέγμα.
     Ξεχωριστό κανάλι από το κόκκινο, ώστε το «λάθος» να μη μπερδεύεται. */
  --y-10:#fffceb;
  --y-40:#fff3a8;
  --y-100:#ffe822;

  --ink-pencil:#1a1a1e;      /* όσο γράφεις */
  --ok:#1b4dd8;              /* σωστή λέξη — μπλε στυλό */
  --bad:#e01b2e;             /* λάθος λέξη */

  --hand:"Mynerve", cursive;
  --ui:"Roboto", system-ui, sans-serif;

  --cell:40px;
  --pager-h:50px;
  --pad-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:var(--ui);background:var(--bg);color:var(--ink-1);
  overscroll-behavior:none;touch-action:manipulation;
}

/* 100dvh αντί για inset:0 — στο κινητό η μπάρα διεύθυνσης μαζεύεται και
   ξαναβγαίνει, και με fixed inset:0 έκοβε το κάτω μέρος της σελίδας. */
#app{
  position:fixed;left:0;right:0;top:0;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:var(--pad-b);
  /* τίποτα δεν μαρκάρεται όσο σέρνεις — ούτε αριθμοί, ούτε ορισμοί */
  user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
}
/* οι εικόνες δεν σέρνονται μόνες τους — αλλιώς το native image-drag του
   browser έκλεβε το gesture του γυρίσματος */
#app img{-webkit-user-drag:none;user-drag:none}
.cover-art img{pointer-events:none}
/* εξαίρεση: στις λύσεις θες να μπορείς να αντιγράψεις */
.sol .sc,.sol .sa.on{user-select:text;-webkit-user-select:text}

.btn{
  font:inherit;font-weight:700;font-size:15px;
  padding:12px 26px;border:0;border-radius:99px;
  background:var(--m-100);color:#fff;cursor:pointer;letter-spacing:.01em;
}
.btn:active{transform:translateY(1px)}
.btn.ghost{
  background:#fff;color:var(--m-ink);border:1.5px solid var(--m-20);
  padding:10px 18px;font-size:14px;
}
.btn.ghost:hover{border-color:var(--m-40);background:var(--m-05)}
/* διακριτικό — για ενέργειες που δεν θέλουμε να προσκαλούν */
.btn.quiet{
  background:none;border:0;color:var(--ink-3);font-size:12px;font-weight:400;
  text-decoration:underline;text-underline-offset:3px;padding:8px 4px;cursor:pointer;
}
.btn.quiet:hover{color:var(--m-ink)}

/* ── μπάρα ορισμού (πάνω, κεντραρισμένη) ───────────────────────── */

/* Η μπάρα κρατάει ΠΑΝΤΑ τον χώρο της, ακόμα κι όταν δεν δείχνει ορισμό —
   αλλιώς η σελίδα άλλαζε ύψος από σελίδα σε σελίδα και έσπαγε η αίσθηση
   του τεύχους. Το ίδιο και το πληκτρολόγιο πιο κάτω. */
/* ΕΠΙΚΑΘΕΤΑΙ, δεν κρατάει χώρο. Όταν κρατούσε, έμενε λωρίδα στο χρώμα του
   φόντου πάνω από το τεύχος και όλο το κενό της σελίδας μαζευόταν επάνω. */
#cluebar{
  position:absolute;top:0;left:0;right:0;z-index:12;
  display:flex;align-items:stretch;
  background:var(--m-05);border-bottom:1px solid var(--m-20);
  min-height:66px;
  box-shadow:0 6px 14px rgba(0,0,0,.30);
  transition:transform .22s ease,opacity .22s ease;
}
#cluebar.empty{transform:translateY(-110%);opacity:0;pointer-events:none}

.clue-hint{
  display:none;align-items:center;gap:9px;
  font:inherit;font-size:14px;color:var(--m-ink);
  background:none;border:0;cursor:pointer;padding:8px 10px;
  border-radius:99px;
}
.clue-hint:active{background:var(--m-10)}
#cluebar.hint .clue-lines,
#cluebar.hint #clue-image{display:none}
#cluebar.hint .clue-hint{display:inline-flex}
#cluebar .clue-nav{
  flex:0 0 44px;background:transparent;border:0;color:var(--m-ink);
  font-size:24px;cursor:pointer;
}
#cluebar .clue-nav:active{background:var(--m-10)}
.clue-body{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
           gap:12px;padding:9px 4px;min-width:0}
#clue-image{height:54px;width:54px;object-fit:cover;flex:0 0 auto;
            border:1px solid var(--rule)}
.clue-lines{min-width:0;text-align:center}
.clue-meta{display:flex;align-items:baseline;gap:8px;justify-content:center;margin-bottom:1px}
.clue-n{font-family:"Roboto Mono",monospace;font-weight:700;font-size:11px;
        color:var(--m-ink);letter-spacing:.1em}
.clue-len{color:var(--ink-3);font-size:11px}
.clue-text{font-size:18px;line-height:1.24;font-weight:500;text-wrap:balance}

/* ── το τεύχος ─────────────────────────────────────────────────── */

#book{
  flex:1 1 auto;min-height:0;display:grid;place-items:center;
  overflow:hidden;                  /* το τεύχος ζουμάρει μέσα του */
  perspective:2200px;perspective-origin:50% 50%;
  container-type:size;              /* για να μετράμε σε cqw/cqh */
  /* Πλάτος μιας σελίδας: όσο χωράει, αλλά πάντα σε λόγο 3:4.
     Το min() κάνει «contain» χωρίς τις παγίδες του aspect-ratio. */
  --pagew:min(100cqw, 75cqh);
}
/* Το «άνοιγμα» — αριστερή σελίδα + δεξιά σελίδα, κεντραρισμένο ολόκληρο.
   Χρειάζεται ρητό width/height: το #book είναι grid με place-items:center
   και δεν τεντώνει τα παιδιά του. */
/* Το ζουμ εφαρμόζεται ΕΔΩ, σε ολόκληρο το άνοιγμα — πλησιάζει το περιοδικό,
   δεν μεγαλώνει ένα παράθυρο μέσα στη σελίδα. */
#spread{display:flex;align-items:center;justify-content:center;gap:0;
        width:100%;height:100%;transform-style:preserve-3d;
        transform-origin:0 0;will-change:transform;--z:1}
#spread.zfx{transition:transform .36s cubic-bezier(.22,.61,.36,1)}

/* Η ΣΕΛΙΔΑ ΕΙΝΑΙ ΠΑΝΤΑ 3:4, σε κάθε οθόνη. Έτσι το εξώφυλλο τη γεμίζει
   ακριβώς, οι τσακίσεις πέφτουν στις πραγματικές γωνίες, και δεν γίνεται
   ποτέ άλμπουμ. Ό,τι δεν χωράει (η σελίδα των ορισμών) βγαίνει εκτός κάδρου. */
#stack{
  position:relative;transform-style:preserve-3d;
  width:100%;height:100%;                       /* fallback χωρίς cq units */
}
@supports (width:1cqw){
  #stack{width:var(--pagew);height:auto;aspect-ratio:3/4}
}

.leaf{
  position:absolute;inset:0;
  transform-origin:left center;transform-style:preserve-3d;
  will-change:transform;
}
.leaf.turning{transition:transform .7s cubic-bezier(.36,.06,.24,1)}

.face{
  position:absolute;inset:0;overflow:hidden;
  background:var(--page);
  display:flex;flex-direction:column;
  backface-visibility:hidden;
  /* διαιρούμε με το ζουμ, ώστε η σκιά να μη μεγεθύνεται μαζί με το χαρτί */
  box-shadow:0 calc(2px / var(--z)) calc(30px / var(--z)) rgba(0,0,0,.45);
}
/* Καμία σκιά ράχης: η ίδια η σελίδα έχει ήδη τη δική της σκιά και δίνει
   το βάθος. Δύο εφέ στο ίδιο σημείο έβγαζαν σκούρα μπάντα στη μέση. */

/* η πίσω όψη του φύλλου — αυτή είναι που κάνει το γύρισμα να μοιάζει χαρτί */
.face.back{
  transform:rotateY(180deg);
  background:
    linear-gradient(to left,#f2f0f2,#ffffff 30%,#f7f5f7);
}
.face.back::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.012) 0 2px,transparent 2px 5px);
}
.shade{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(to right,rgba(0,0,0,0) 55%,rgba(0,0,0,.22));
}

/* Peel: το χαρτί δεν λυγίζει πραγματικά (θα ήθελε WebGL), αλλά η λάμψη που
   τρέχει στην ακμή και η γωνία που στρογγυλεύει δίνουν την ίδια αίσθηση. */
.leaf{--curl:0}
.face.front::after{
  content:"";position:absolute;top:0;bottom:0;right:0;
  width:calc(18% + var(--curl) * 16%);
  background:linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 62%,
    rgba(0,0,0,.10) 92%,
    rgba(0,0,0,.20) 100%);
  opacity:var(--curl);
  pointer-events:none;z-index:6;
}
.leaf{border-top-right-radius:calc(var(--curl) * 26px);
      border-bottom-right-radius:calc(var(--curl) * 14px)}
.face{border-top-right-radius:inherit;border-bottom-right-radius:inherit}

/* Οι γωνίες που πιάνονται — μικρό τσακισμένο τριγωνάκι, όπως σε χαρτί
   που το έχουν ξεφυλλίσει. Δείχνουν ακριβώς πού δουλεύει το γύρισμα. */
/* Η ΓΩΝΙΑ πιάνεται ΜΟΝΟ στο τρίγωνο. Ως τετράγωνο, το hitbox κάθεται πάνω
   σε κελιά του σταυρόλεξου και τα έκανε αδύνατο να επιλεγούν -- το clip-path
   κόβει και το hit-testing, που εδώ είναι ακριβώς ό,τι θέλουμε. Το ίδιο
   σχήμα μπαίνει και στο ψευδοστοιχείο, που ζωγραφίζει την τσάκιση. */
.face > .corner{
  position:absolute;bottom:0;z-index:7;pointer-events:auto;
  width:15%;max-width:68px;aspect-ratio:1;
}
.face.front > .corner.r{clip-path:polygon(100% 0,100% 100%,0 100%)}
.face.back  > .corner.l{clip-path:polygon(0 0,100% 100%,0 100%)}
.face > .corner::before{
  content:"";position:absolute;inset:0;
  opacity:0;transition:opacity .2s ease;pointer-events:none;
}
/* μπροστινή όψη: η ελεύθερη ακμή είναι δεξιά */
.face.front > .corner.r{right:0}
.face.front > .corner.r::before{
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(225deg,#fff 0%,#f1eff1 40%,#dbd8db 52%,
             rgba(0,0,0,.14) 56%,transparent 57%);
}
/* πίσω όψη = η αριστερή σελίδα· η ελεύθερη ακμή της είναι τέρμα αριστερά */
.face.back > .corner.l{left:0}
.face.back > .corner.l::before{
  clip-path:polygon(0 0,100% 100%,0 100%);
  background:linear-gradient(135deg,#fff 0%,#f1eff1 40%,#dbd8db 52%,
             rgba(0,0,0,.14) 56%,transparent 57%);
}
/* Η γωνία της όψης που κοιτάει ΑΛΛΟΥ δεν ζωγραφίζεται, αλλά ο browser την
   κρατάει στο hit-testing — και επειδή πέφτει ακριβώς πάνω στη σωστή, της
   έτρωγε το hover. Την απενεργοποιούμε ρητά. */
.leaf.turned > .face.front > .corner{pointer-events:none}
.leaf:not(.turned) > .face.back > .corner{pointer-events:none}

/* με ποντίκι μόνο στο hover· σε αφή αναβοσβήνει μόνο στο εξώφυλλο */
@media (hover:hover){
  .face > .corner:hover::before{opacity:.75}
}
.leaf.show-corners > .face > .corner::before{opacity:.55}
/* Στο εξώφυλλο δεν χρειάζεται: εκεί μιλάει το animation που σηκώνει τη γωνία. */
.leaf[data-page="0"] > .face.front > .corner{display:none}

/* ── εξώφυλλο ──────────────────────────────────────────────────── */

.cover{display:grid;background:var(--cover-bleed);cursor:pointer}

/* Το artboard είναι 3:4 (1200x1600, safe zone το εσωτερικό 90% = 1080x1440).
   ΔΕΝ το επιβάλλουμε με aspect-ratio: όταν συνυπάρχει ρητό width με
   max-height, το CSS παρατάει τον λόγο και η εικόνα πετσοκόβεται. Αντ' αυτού
   το object-fit:contain κρατάει πάντα τον λόγο της ίδιας της εικόνας, και
   ό,τι περισσεύει γύρω γεμίζει με το --cover-bleed. */
.cover-art{position:relative;width:100%;height:100%;overflow:hidden}
.cover-art img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
}

/* Η πρόοδος εμφανίζεται μόνο αφού ξεκινήσεις — μέχρι τότε το γραφιστικό
   μένει καθαρό, χωρίς τίποτα από πάνω του. */
.cover-progress{
  position:absolute;left:4%;bottom:7.5%;z-index:2;
  background:rgba(0,0,0,.82);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  padding:7px 14px;border-radius:99px;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
  pointer-events:none;
}
.cover-progress.on{opacity:1;transform:none}

/* ── σελίδα πλέγματος ──────────────────────────────────────────── */

.puzzle{padding:0}
.puzzle-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;
             padding:8px 14px 8px 34px;border-bottom:1px solid var(--hair);
             position:relative;z-index:6}
.puzzle-head h2{margin:0;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
                color:var(--ink-3);font-weight:700}
.puzzle-head .score{margin-left:auto;font-size:12px;color:var(--m-ink);font-weight:700;
                    font-family:"Roboto Mono",monospace}
/* «δες όλο το πλέγμα» — εικονίδιο σμίκρυνσης, εμφανίζεται μόνο όταν είσαι
   ζουμαρισμένος. Ίδια λογική με το κουμπί εξόδου από πλήρη οθόνη. */
.fitbtn{
  position:absolute;top:calc(var(--chrome-t,0px) + env(safe-area-inset-top,0px) + 10px);
  right:12px;z-index:30;
  width:38px;height:38px;border-radius:50%;border:0;padding:0;
  background:rgba(20,20,24,.72);color:#fff;cursor:pointer;
  display:grid;place-items:center;
  opacity:0;transform:scale(.8);pointer-events:none;
  transition:opacity .18s,transform .18s;
  backdrop-filter:blur(3px);
}
.fitbtn.on{opacity:1;transform:none;pointer-events:auto}
.fitbtn:hover{background:var(--m-100)}
.fitbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;
            stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.gridwrap{flex:1 1 auto;position:relative;overflow:hidden;touch-action:none;
          background:var(--page)}
.stage{position:absolute;top:0;left:0;transform-origin:0 0}
.stage.fx{transition:transform .34s cubic-bezier(.22,.61,.36,1)}
.grid{display:grid;gap:0;position:relative}

.c{width:var(--cell);height:var(--cell);position:relative;
   display:flex;align-items:center;justify-content:center}

.c.void{}                                   /* κενό = λευκή σελίδα */

.c.letter{background:#fff;border:1px solid var(--rule);margin:-1px 0 0 -1px}
.c.letter.inword{background:var(--y-10)}
.c.letter.active{background:var(--y-100);z-index:6}

.c .ink{
  font-family:var(--hand);font-size:calc(var(--cell) * .78);line-height:1;
  color:var(--ink-pencil);
  transform:rotate(var(--jit,0deg)) translateY(var(--jit-y,0px));
  pointer-events:none;
}
.c.solved .ink{color:var(--ok)}
.c.wrong .ink{color:var(--bad)}
.c.wrong::after{
  content:"";position:absolute;left:14%;right:14%;bottom:10%;height:2px;
  background:repeating-linear-gradient(90deg,var(--bad) 0 3px,transparent 3px 6px);
}

/* κελί ορισμού — μαύρο, όπως στα έντυπα */
.c.clue{
  background:var(--rule);border:1px solid var(--rule);margin:-1px 0 0 -1px;
  flex-direction:column;justify-content:center;cursor:pointer;color:#fff;
}
.c.clue .cn{font-family:"Roboto Mono",monospace;font-weight:700;
            font-size:calc(var(--cell) * .28);line-height:1.05}
.c.clue .ar{font-size:calc(var(--cell) * .32);line-height:1;opacity:.85}
.c.clue.on{background:var(--m-100);border-color:var(--m-100)}

.imgblock{position:absolute;z-index:3;border:1px solid var(--rule);
          background:#fff;overflow:hidden;cursor:pointer}
.imgblock img{width:100%;height:100%;object-fit:cover;display:block}
.imgblock .tag{position:absolute;left:0;bottom:0;background:var(--rule);color:#fff;
               font-family:"Roboto Mono",monospace;font-weight:700;
               font-size:calc(var(--cell) * .26);padding:1px 5px}
.imgblock.on{box-shadow:0 0 0 3px var(--m-100)}

/* ── τελευταία σελίδα ──────────────────────────────────────────── */

/* Σκρολάρει το ΠΕΡΙΕΧΟΜΕΝΟ μέσα στη σελίδα, όχι η σελίδα. Αλλιώς έφευγε
   μαζί και η σκιά της ράχης, και έμενε κομμένη ακμή στο πλάι. */
/* Το περιεχόμενο κυλάει ΠΑΝΤΑ όταν δεν χωράει -- σε μικρές ή περίεργες
   οθόνες κοβόταν το κουμπί των λύσεων και δεν υπήρχε τρόπος να το φτάσεις.
   Όταν χωράει, δεν εμφανίζεται μπάρα. */
/* Η κύλιση οδηγείται από τη JS (το iOS δεν κυλάει μέσα σε preserve-3d),
   γι' αυτό touch-action:none: δεν θέλουμε ΚΑΙ τον browser να κυλάει από
   πάνω μας, θα διπλασίαζε την κίνηση σε Android και desktop.
   Και όχι scroll-behavior:smooth -- κάθε βήμα του σύρσιμου θα ζητούσε δική
   του ομαλή μετάβαση και η κίνηση θα καθυστερούσε πίσω από το δάχτυλο. */
.last{overflow:hidden}
.last .sheet{overflow-y:auto;touch-action:none;scroll-behavior:auto}
.sheet::-webkit-scrollbar{width:10px}
.sheet::-webkit-scrollbar-track{background:var(--m-05)}
.sheet::-webkit-scrollbar-thumb{background:var(--m-20);border-radius:99px;
                                border:3px solid var(--m-05)}
.sheet::-webkit-scrollbar-thumb:hover{background:var(--m-40)}
.sheet{scrollbar-width:thin;scrollbar-color:var(--m-20) var(--m-05)}

/* Κλειστές λύσεις = μια σελίδα που χωράει ολόκληρη, χωρίς σκρολ.
   Ανοιχτές = η σελίδα επιμηκύνεται και σκρολάρει. */
.last{display:flex}
.sheet{position:relative;padding:14px 16px 18px 36px;max-width:620px;
       margin:0 auto;width:100%;display:flex;flex-direction:column;min-height:0}
.last.scrollable .sheet{display:block;padding-bottom:42px}
.sheet h2{margin:0 0 3px;font-size:20px;font-weight:900;letter-spacing:-.015em}
.sheet h2.mt{margin-top:26px}
.sheet .sub{margin:0 0 12px;color:var(--ink-2);font-size:13px}

/* Το ταμπλό ΜΑΖΕΥΕΤΑΙ όσο χρειάζεται ώστε το κουμπί των λύσεων να χωράει
   χωρίς scroll. Όταν το είχα κλειδώσει σε 340px έπιανε το 61% της σελίδας,
   έσπρωχνε το κουμπί εκτός ορατού, και επειδή είναι επιφάνεια σχεδίασης
   κατάπινε και τη χειρονομία -- στο iPhone δεν υπήρχε τρόπος να φτάσεις
   στις λύσεις.

   pan-y: η κατακόρυφη κύλιση ανήκει στη σελίδα, το πάτημα στις τελείες.
   Χωρίς αυτό, μια προσπάθεια scroll πάνω στο ταμπλό δεν έκανε τίποτα. */
#dots-wrap{background:#fff;border:1px solid var(--hair);overflow:hidden;
           touch-action:none;display:flex;justify-content:center;
           flex:1 1 auto;min-height:150px}
#dots-wrap svg{display:block;width:100%;height:100%}
/* Μόλις ανοίξουν οι λύσεις, το ταμπλό των τελειών ΜΙΚΡΑΙΝΕΙ — δεν μεγαλώνει.
   Πριν γινόταν 46vh και έσπρωχνε τις λύσεις κάτω από το ορατό, με
   αποτέλεσμα να μοιάζουν εξαφανισμένες. */
.last.scrollable #dots-wrap{flex:none;height:min(30vh,260px);min-height:150px}
.dot-pt{fill:#b6b6c0}
.dot-pt.done{fill:var(--m-100)}
.dot-pt.next{fill:var(--m-100)}
/* σε μονάδες viewBox (1080) — βγαίνει ~13px στην οθόνη του κινητού */
.dot-num{font-family:"Roboto Mono",monospace;font-size:44px;font-weight:700;
         fill:var(--ink-2);paint-order:stroke;stroke:#fff;stroke-width:7px}
.dot-num.next{font-size:60px;fill:var(--m-100)}
.dot-line{stroke:var(--m-100);stroke-width:2.5;fill:none;
          stroke-linejoin:round;stroke-linecap:round}
.dot-reveal{stroke:var(--ink-1);stroke-width:1.5;fill:none;opacity:.28}
.dots-tools{display:flex;align-items:center;gap:12px;margin-top:10px}
.dots-tools .spacer{flex:1 1 auto}

#solutions-list{margin-top:16px}
.sol-page{margin-bottom:22px}
.sol-page h3{font-size:10px;text-transform:uppercase;letter-spacing:.22em;
             color:var(--m-ink);border-bottom:1px solid var(--hair);
             padding-bottom:5px;margin:0 0 8px}
.sol{display:flex;gap:10px;padding:6px 0;font-size:14px;line-height:1.3;
     border-bottom:1px solid var(--m-05)}
.sol .sn{font-family:"Roboto Mono",monospace;font-weight:700;color:var(--ink-3);
         flex:0 0 34px}
.sol .sc{color:var(--ink-2)}
.sol .sa{
  margin-left:auto;font:inherit;font-weight:700;color:var(--m-ink);
  white-space:nowrap;background:none;border:0;padding:0 2px;cursor:pointer;
  filter:blur(5px);opacity:.75;transition:filter .18s,opacity .18s;
  user-select:none;
}
.sol .sa:hover{filter:blur(3px)}
.sol .sa.on{filter:none;opacity:1;cursor:default;user-select:text}

/* ── πληκτρολόγιο — καθαρά γράμματα, όχι χειρόγραφα ────────────── */

/* Το πληκτρολόγιο κρατάει τον χώρο του πάντα. Δοκιμάστηκε να επικάθεται
   ώστε να μεγαλώσει η σελίδα — αλλά τότε το κενό απλώς μετακόμιζε στην
   κορυφή και τα πλήκτρα έκρυβαν το κάτω μέρος του πλέγματος. */
#keyboard{
  position:absolute;left:0;right:0;bottom:var(--pager-h);z-index:12;
  background:#ecebef;padding:6px 4px;user-select:none;
  border-top:1px solid var(--hair);
  box-shadow:0 -6px 14px rgba(0,0,0,.30);
  transition:transform .22s ease,opacity .22s ease;
}
#keyboard.empty{transform:translateY(115%);opacity:0;pointer-events:none}
.krow{display:flex;gap:5px;justify-content:center;margin-bottom:5px}
.key{
  flex:1 1 0;max-width:42px;height:46px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ink-1);border-radius:7px;
  font-family:var(--ui);font-size:19px;font-weight:500;
  border:1px solid #d8d8e0;box-shadow:0 1px 0 #c3c3cd;cursor:pointer;
}
.key:active{background:var(--m-100);color:#fff;border-color:var(--m-100);
            box-shadow:none;transform:translateY(1px)}
.key.wide{max-width:62px;flex:1.4 1 0;font-size:17px;background:#dedee6}

/* ── πληκτρολόγιο στο πλάι (οριζόντια συσκευή αφής) ─────────────
   Σε οριζόντιο tablet το πληκτρολόγιο από κάτω έτρωγε ύψος, και επειδή η
   σελίδα δένεται στο ύψος έβγαινε μικρότερη κι από κινητό — ενώ περίσσευαν
   ~300px πλάτος. Εδώ μπαίνει στο πλάι και η σελίδα παίρνει όλο το ύψος.
   Ενεργοποιείται ΜΟΝΟ σε coarse pointer: ποντίκι/trackpad δεν το βλέπουν. */
#app.kbside #keyboard{
  left:auto;right:0;top:0;bottom:var(--pager-h);
  width:clamp(280px, 34vw, 430px);
  display:flex;flex-direction:column;justify-content:center;
  border-top:0;border-left:1px solid var(--hair);
  padding:10px 8px;
  box-shadow:-6px 0 14px rgba(0,0,0,.30);
}
#app.kbside #keyboard.empty{transform:translateX(115%)}

/* ── pager ─────────────────────────────────────────────────────── */

#pager{flex:0 0 auto;display:flex;align-items:center;gap:12px;
       height:var(--pager-h);padding:0 12px;background:var(--bg)}
#pager button{width:42px;height:34px;border:1px solid #4a4a52;border-radius:8px;
              background:transparent;color:#fff;font-size:18px;cursor:pointer}
#pager button:disabled{opacity:.22}
#dots-nav{flex:1 1 auto;display:flex;gap:7px;justify-content:center}
.pdot{width:8px;height:8px;border-radius:99px;background:#3a3a44;cursor:pointer;
      transition:width .2s,background .2s}
.pdot.on{width:22px;background:var(--m-100)}

/* Στο εξώφυλλο δεν υπάρχει κουμπί πάνω στο γραφιστικό, οπότε διδάσκουμε την
   κίνηση αλλού: το βέλος χτυπάει συνέχεια, και η γωνία της σελίδας σηκώνεται
   και ξαναπέφτει σαν να τη γυρνάει κάποιος. */
@keyframes nudge{
  0%,55%,100%{transform:translateX(0);background:transparent;color:#fff}
  70%,80%{transform:translateX(5px);background:var(--m-100);color:#fff}
}
#app.at-cover #next{animation:nudge 2.6s ease-in-out infinite;
                    border-color:var(--m-100)}

.cover-peel{
  position:absolute;right:0;bottom:0;width:24%;z-index:3;
  aspect-ratio:1;pointer-events:none;opacity:0;
  clip-path:polygon(100% 0,100% 100%,0 100%);
  background:linear-gradient(225deg,
    #ffffff 0%,#f4f2f3 38%,#dcd9dc 52%,rgba(0,0,0,.28) 56%,transparent 57%);
  animation:peel 3.4s ease-in-out infinite;
}
@keyframes peel{
  0%,62%,100%{opacity:0;transform:translate(16%,16%)}
  18%,44%{opacity:1;transform:translate(0,0)}
}
#app:not(.at-cover) .cover-peel{animation:none;opacity:0}

/* Κρατάει τη θέση της αριστερής σελίδας ώστε το άνοιγμα να κεντράρεται.
   Το περιεχόμενο δεν μπαίνει εδώ — το τυπώνει η πίσω όψη του φύλλου. */
#facing{position:relative;display:none;visibility:hidden;pointer-events:none;
        overflow:hidden;transition:width .62s cubic-bezier(.36,.06,.24,1)}

/* ── η πίσω όψη του φύλλου: εδώ τυπώνονται οι ορισμοί ──────────── */

/* Το κείμενο ΜΙΚΡΑΙΝΕΙ μαζί με τη σελίδα, αντί να ξεχειλίζει. Το --pagew
   είναι το πλάτος της σελίδας, οπότε οι ορισμοί κλιμακώνονται μαζί της. */
.back-inner{position:absolute;inset:0;display:flex;flex-direction:column;
            padding:16px 22px 14px 20px;overflow:hidden;
            font-size:clamp(7.5px, calc(var(--pagew) * .0248), 13px)}
.back-inner:empty{display:none}
.back-inner h3{
  margin:0 0 8px;font-size:.8em;letter-spacing:.24em;text-transform:uppercase;
  color:var(--m-ink);border-bottom:1px solid var(--hair);padding-bottom:6px;
}
/* ΔΥΟ ΡΗΤΕΣ ΣΤΗΛΕΣ, όχι CSS columns. Με columns, ό,τι δεν χωρούσε σε ύψος
   έφτιαχνε ΝΕΑ στήλη δεξιά: εμφανιζόταν οριζόντια μπάρα κύλισης και τα
   ΚΑΘΕΤΑ έφευγαν εκτός κάδρου. */
.facing-cols{flex:1 1 auto;min-height:0;display:flex;gap:14px;overflow:hidden}
 /* ΧΩΡΙΣ scroll: μέσα σε 3D-περιστραμμένη όψη το scroll δεν αποκρίνεται
    αξιόπιστα, οπότε η μπάρα φαινόταν και δεν δούλευε. Αντ' αυτού τα
    γράμματα μικραίνουν, και αν η σελίδα είναι πολύ μικρή δεν εμφανίζεται
    καθόλου (βλ. syncSpread). */
.cl-group{flex:1 1 0;min-width:0;overflow:hidden;padding-right:4px}
.cl-group + .cl-group{border-left:1px solid var(--hair);padding-left:14px}
/* οι ορισμοί ζωγραφίζονται μόνο όταν φαίνεται η αριστερή σελίδα */
#app:not(.spread) .back-inner{display:none}
.cl-group > b{display:block;font-size:.72em;letter-spacing:.2em;color:var(--ink-3);
              margin-bottom:4px;text-transform:uppercase;position:sticky;top:0;
              background:#fff;padding-bottom:2px}
.cl-item{
  display:flex;gap:6px;font-size:1em;line-height:1.24;padding:1px 4px;
  border-radius:3px;cursor:pointer;
}
.cl-item:hover{background:var(--y-10)}
.cl-item.on{background:var(--y-100)}
.cl-item.done{color:var(--ink-3)}
.cl-item.done .cl-t{text-decoration:line-through}
.cl-n{font-family:"Roboto Mono",monospace;font-weight:700;color:var(--m-ink);
      flex:0 0 auto}
.cl-item.done .cl-n{color:var(--ink-3)}

/* ── desktop ───────────────────────────────────────────────────── */

/* Η αριστερή σελίδα με τους ορισμούς εμφανίζεται ΜΟΝΟ όταν είναι τζάμπα:
   όταν η οθόνη είναι αρκετά φαρδιά ώστε να χωρέσει δεύτερη σελίδα χωρίς
   να μικρύνει η πρώτη. Το κρίνει η JS μετρώντας το #book, γιατί εξαρτάται
   από το ύψος του τεύχους και όχι από το πλάτος του παραθύρου. */
#app.spread #book{--pagew:min(48cqw, 75cqh)}
#app.spread #facing{display:block;width:var(--pagew);aspect-ratio:3/4;
                    height:auto;flex:0 0 auto}
/* στο εξώφυλλο δεν υπάρχει διπλανή σελίδα — μόνο το γκρι */
/* Στο εξώφυλλο δεν υπάρχει διπλανή σελίδα. Δεν την κρύβουμε όμως απότομα:
   μαζεύεται σε μηδενικό πλάτος με την ίδια διάρκεια που γυρνάει η σελίδα,
   ώστε το τεύχος να ξανακεντράρεται ομαλά αντί να τινάζεται. */
#app.spread.at-cover #facing{width:0}
@media (min-width:900px){.clue-text{font-size:20px}}
/* Το πληκτρολόγιο κρύβεται ΜΟΝΟ σε συσκευή με ποντίκι/trackpad, όχι με βάση
   το πλάτος. Ένα οριζόντιο tablet ξεπερνά τα 900px αλλά ΔΕΝ έχει φυσικό
   πληκτρολόγιο — και επειδή δεν υπάρχει <input> πουθενά, δεν άνοιγε ούτε το
   δικό του. Ο χρήστης δεν μπορούσε να γράψει καθόλου. */
/* Ποντίκι ή trackpad -> ποτέ πληκτρολόγιο οθόνης, όσο στενό κι αν είναι το
   παράθυρο. Με το παλιό min-width:900px, ένα μικρό παράθυρο σε laptop
   έβγαζε πληκτρολόγιο και έκοβε το σταυρόλεξο. */
@media (hover:hover) and (pointer:fine){
  #keyboard{display:none!important}
}

/* ── λιγότερη κίνηση ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  .leaf.turning{transition:transform .12s linear}
  .stage.fx{transition:none}
  .face.front::after{display:none}
  .leaf{border-radius:0}
  .last.scrollable .sheet{scroll-behavior:auto}
}

/* Ζουμαρισμένος: οι τσακίσεις φεύγουν -- εκεί σέρνεις για να μετακινηθείς. */
#app.zoomed .corner{display:none}

/* Ζουμαρισμένος: το σύρσιμο ανήκει στην πανοραμική, όχι στο scroll. */
#app.zoomed #book{touch-action:none}

/* ── βοήθειες: δύο ανά λέξη ────────────────────────────────────── */
.hint-btn{
  align-self:flex-start;margin-top:4px;
  border:1px solid var(--m-40);background:transparent;color:var(--m-100);
  font:700 12px/1 'Roboto',sans-serif;letter-spacing:.02em;
  padding:5px 9px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.hint-btn:hover:not(:disabled){background:var(--m-10)}
.hint-btn:disabled{opacity:.35;cursor:default}
#cluebar.hint .hint-btn,#cluebar.empty .hint-btn{display:none}
#hint-count{font-family:'Roboto Mono',monospace}

/* Το δοσμένο γράμμα δεν είναι δικό σου κατόρθωμα -- φαίνεται πιο αχνό
   και δεν σβήνεται. */
.c.letter.given > .ink{opacity:.55}