/* =====================================================================
   ΓΛΩΣΣΟΔΡΟΜΙΟ — οπτική ταυτότητα
   Ιδέα: τα γραφικά συστήματα του κόσμου ως διακοσμητικό υλικό.
   Γραμματοσειρές: Fira Sans Extra Condensed (τίτλοι) + Fira Sans Condensed (κείμενο),
   και οι δύο με πλήρη υποστήριξη ελληνικών.
   ===================================================================== */

:root {
  --ink:        #16173a;
  --ink-soft:   #4c4e75;
  --paper:      #efedf6;
  --card:       #ffffff;
  --line:       #d9d5e8;
  --violet:     #5b4bcc;
  --saffron:    #f2a71b;
  --sea:        #0e8b86;
  --coral:      #d94f45;

  /* ── Σκούρες επιφάνειες ──────────────────────────────────────────────
     Το «--ink» παραμένει το χρώμα του ΚΕΙΜΕΝΟΥ σε ολόκληρο τον ιστότοπο
     και δεν αγγίζεται. Οι επιφάνειες με σκούρο φόντο — κεφαλίδα, λωρίδα
     γλυφών, μπάρα του παιχνιδιού, χρονόμετρο, προβολή στην τάξη — παίρνουν
     δικές τους μεταβλητές, ώστε η απόχρωση να αλλάζει από ένα σημείο.

     Το μωβ ταιριάζει με το promo και είναι πιο χαρούμενο για παιδιά. Το
     κροκί και το απαλό λιλά φωτίστηκαν αντίστοιχα: πάνω στο μωβ, τα
     σκούρα τους αντίστοιχα έπεφταν κάτω από το όριο αναγνωσιμότητας.

       λευκό πάνω σε μωβ    7,45:1   άριστη
       κροκί πάνω σε μωβ    4,86:1   καλή
       λιλά  πάνω σε μωβ    5,42:1   καλή                                */
  --surface:      #7f3591;
  --surface-deep: #6b2d78;
  --on-surface:      #ffffff;
  --on-surface-soft: #ddd9f2;
  --on-surface-acc:  #ffc94d;

  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;

  --shadow: 0 2px 0 var(--line), 0 18px 40px -28px rgba(22, 23, 58, .5);
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Fira Sans Condensed", "Roboto Condensed", system-ui, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); }

a { color: var(--violet); }

.eyebrow {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wrap { width: min(1080px, 92vw); margin-inline: auto; }
.narrow { width: min(680px, 92vw); margin-inline: auto; }

/* --- Λωρίδα γραφημάτων: η υπογραφή της σελίδας ---------------------- */
.glyphband {
  /* ΠΑΡΑΜΕΝΕΙ ΣΚΟΥΡΟ ΜΠΛΕ. Τώρα που η κεφαλίδα από κάτω είναι μωβ, το
     μπλε δίνει αντίθεση και ορίζει καθαρά την κορυφή της σελίδας — αν
     γινόταν κι αυτή μωβ, τα δύο θα λιώνανε σε ένα. */
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding: .55rem 0;
  border-bottom: 3px solid var(--saffron);
}
.glyphband__track {
  display: flex;
  width: max-content;
  animation: drift 42s linear infinite;
  font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif;
  font-size: 1.35rem;
  opacity: .85;
}
/* Το κενό μπαίνει ως padding, όχι ως gap: έτσι το μισό της λωρίδας
   είναι ακριβώς ίσο με μία περίοδο και η κύλιση δεν «πηδά». */
.glyphband__track span { flex: none; padding-right: 2.2rem; }
@keyframes drift { to { transform: translateX(-50%); } }

/* --- Κεφαλίδα -------------------------------------------------------- */
.masthead {
  background: var(--surface);
  color: #fff;
  padding: 3.2rem 0 3.6rem;
  position: relative;
}
.masthead h1 { color: #fff; max-width: 16ch; }
.masthead p { color: var(--on-surface-soft); max-width: 46ch; margin: 0; }
.masthead .eyebrow { color: var(--on-surface-acc); }
.masthead__mark {
  position: absolute;
  right: 3vw; bottom: -.35em;
  font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif;
  font-size: clamp(7rem, 22vw, 15rem);
  line-height: .8;
  color: rgba(255, 255, 255, .07);
  pointer-events: none;
  user-select: none;
}

/* --- Κάρτες ---------------------------------------------------------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(1.4rem, 4vw, 2.6rem);
}
.card + .card { margin-top: 1.4rem; }

.stack { margin-block: -2.4rem 3rem; position: relative; z-index: 2; }

/* --- Φόρμες ---------------------------------------------------------- */
.field { margin-bottom: 1.1rem; }
.field label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .15rem .6rem;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .32rem;
}
/* Εικονίδιο ετικέτας */
.field label .ic {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--violet);
  opacity: .85;
}
.field .hint { font-size: .82rem; color: var(--ink-soft); font-weight: 400; }

.field input[type=text],
.field input[type=email],
.field input[type=number],
.field input[type=password],
.field input[type=datetime-local],
.field select,
.field textarea {
  width: 100%;
  padding: .68rem .8rem;
  font: inherit;
  font-size: .98rem;
  color: var(--ink);
  background: #fbfaff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
}
.field textarea { min-height: 6rem; resize: vertical; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 2px;
}

.grid2 { display: grid; gap: 0 1.1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } }

.consent {
  background: #f7f5ff;
  border: 1.5px solid var(--violet);
  border-radius: var(--r-md);
  padding: 1.1rem 1.2rem;
  margin: 1.6rem 0;
}
.consent label { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; }
.consent input[type=checkbox] { margin-top: .3rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--violet); }

/* --- Κουμπιά --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* απαραίτητο όταν το κουμπί πιάνει όλο το πλάτος */
  text-align: center;
  gap: .5rem;
  font: inherit;
  font-weight: 700;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--surface);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--saffron); border-color: var(--ink); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--sm { padding: .45rem 1rem; font-size: .88rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* --- Μηχανή ερωτήσεων ------------------------------------------------ */
.quizbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  color: #fff;
  padding: .7rem 0;
}
.quizbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quizbar__meta { font-size: .85rem; letter-spacing: .04em; color: var(--on-surface-soft); }
.clock {
  font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--saffron);
}
.clock.is-low { color: #ff8f7a; }

.progress { height: 4px; background: rgba(255,255,255,.16); }
.progress__bar { height: 100%; background: var(--saffron); transition: width .4s ease; }

.question { position: relative; }
.question__glyph {
  position: absolute;
  top: -1.6rem; right: 0;
  font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif;
  font-size: 6rem;
  line-height: 1;
  color: rgba(91, 75, 204, .10);
  pointer-events: none;
}
.question__index { color: var(--ink-soft); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.question__body { font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif; font-size: clamp(1.35rem, 3.6vw, 1.85rem); line-height: 1.28; margin: .4rem 0 1.6rem; max-width: var(--measure); }

.choices { display: grid; gap: .7rem; }
.choice {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .9rem 1.1rem;
  background: #fbfaff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: 1.02rem;
  transition: border-color .12s ease, background .12s ease;
}
.choice:hover { border-color: var(--violet); background: #f5f2ff; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__key {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  font-weight: 700;
  font-size: .9rem;
}
.choice:has(input:checked) { border-color: var(--violet); background: #ece7ff; }
.choice:has(input:checked) .choice__key { background: var(--violet); color: #fff; border-color: var(--violet); }
.choice:has(input:focus-visible) { outline: 3px solid var(--saffron); outline-offset: 2px; }

.quiz-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.8rem; gap: 1rem; }

/* --- Αποτέλεσμα ------------------------------------------------------ */
.score {
  font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif;
  font-size: clamp(3.4rem, 12vw, 6rem);
  line-height: 1;
  color: var(--violet);
}
.score small { font-size: .3em; color: var(--ink-soft); }

.review { border-top: 1px solid var(--line); padding: 1.1rem 0; }
.review__q { font-weight: 600; }
.review__a { font-size: .93rem; color: var(--ink-soft); }
.tag { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .18rem .6rem; border-radius: 999px; }
.tag--ok { background: #d9f2ee; color: var(--sea); }
.tag--no { background: #fbe3e0; color: var(--coral); }

/* --- Μηνύματα -------------------------------------------------------- */
.notice { border-left: 4px solid var(--violet); background: #f4f1ff; padding: .9rem 1.1rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 1.2rem; }

/* Τα μηνύματα άρνησης και επιτυχίας πρέπει να ξεχωρίζουν με μια ματιά, πριν
   καν διαβαστούν: απαλό κόκκινο για ό,τι εμποδίζει, απαλό πράσινο για ό,τι
   πέτυχε. Η αριστερή λωρίδα και το χρώμα του κειμένου ακολουθούν. */
.notice--error       { border-color: var(--coral); background: #fdeceb; color: #8f2b23; }
.notice--error strong { color: var(--coral); }
.notice--error li    { margin-bottom: .2rem; }
.notice ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; }

/* --- Πίνακες (admin) ------------------------------------------------- */
table.data { width: 100%; border-collapse: collapse; font-size: .92rem; background: #fff; }
table.data th, table.data td { text-align: start; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
table.data tr:hover td { background: #faf9ff; }

.adminnav { background: var(--surface); color: #fff; padding: .8rem 0; }
.adminnav a { color: var(--on-surface-soft); text-decoration: none; margin-inline-end: 1.3rem; font-size: .92rem; font-weight: 600; }
.adminnav a.is-active, .adminnav a:hover { color: var(--on-surface-acc); }

.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1.6rem; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.2rem; }
.stat b { display: block; font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif; font-size: 2.1rem; line-height: 1.1; }
.stat span { font-size: .82rem; color: var(--ink-soft); }

footer.site {
  padding: 2.4rem 0 3rem;
  font-size: .85rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .btn:hover { transform: none; }
}

/* =====================================================================
   Θεσμική ταυτότητα — ΑΠΘ στο hero, LDLC στο υποσέλιδο
   ===================================================================== */

.masthead__inst {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.7rem;
}
.masthead__inst img {
  width: 52px;
  height: auto;
  flex: none;
  opacity: .96;
}
.masthead__inst-txt {
  margin: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.32;
  border-left: 1px solid rgba(255, 255, 255, .28);
  padding-left: .95rem;
}
.masthead__inst-txt span:first-child {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
}
.masthead__inst-txt span:last-child {
  font-size: .78rem;
  color: var(--on-surface-soft);
}

/* Το «Ω» φόντου να μην πέφτει πάνω στο λογότυπο σε μικρές οθόνες */
@media (max-width: 640px) {
  .masthead__inst img { width: 44px; }
  .masthead__inst-txt span:first-child { font-size: .76rem; }
  .masthead__inst-txt span:last-child  { font-size: .73rem; }
  .masthead__mark { opacity: .55; }
}

/* --- Υποσέλιδο ------------------------------------------------------- */
footer.site .wrap {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  border-top: 1px solid var(--line);
  padding-top: 1.8rem;
}
.site__lab {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site__lab img {
  width: 92px;
  height: auto;
  flex: none;
}
.site__lab p {
  margin: 0;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--ink-soft);
}
.site__legal { margin: 0; }

/* --- Αχνά γράμματα στο ανοιχτό φόντο --------------------------------- */
.paperglyphs {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif;
  color: var(--violet);
}
.paperglyphs span {
  position: absolute;
  line-height: 1;
  /* Διακριτικά, ώστε να δίνουν υφή χωρίς να ενοχλούν την ανάγνωση. */
  opacity: .032;
}
.paperglyphs span:nth-child(1)  { top:  6%; left:  3%; font-size: 15rem; }
.paperglyphs span:nth-child(2)  { top: 22%; left: 88%; font-size:  7rem; }
.paperglyphs span:nth-child(3)  { top: 44%; left:  1%; font-size:  5rem; }
.paperglyphs span:nth-child(4)  { top: 61%; left: 92%; font-size: 12rem; }
.paperglyphs span:nth-child(5)  { top: 79%; left:  6%; font-size:  8rem; }
.paperglyphs span:nth-child(6)  { top: 12%; left: 71%; font-size:  4rem; }
.paperglyphs span:nth-child(7)  { top: 35%; left: 79%; font-size: 10rem; }
.paperglyphs span:nth-child(8)  { top: 88%; left: 74%; font-size:  6rem; }
.paperglyphs span:nth-child(9)  { top: 53%; left: 12%; font-size:  3.4rem; }
.paperglyphs span:nth-child(10) { top: 70%; left: 84%; font-size:  4.5rem; }
.paperglyphs span:nth-child(11) { top: 30%; left:  9%; font-size:  6.5rem; }
.paperglyphs span:nth-child(12) { top: 95%; left: 20%; font-size:  9rem; }

/* Σε στενές οθόνες μόνο τα μεγάλα, στις άκρες, αλλιώς γίνεται θόρυβος */
@media (max-width: 820px) {
  .paperglyphs span { opacity: .04; }
  .paperglyphs span:nth-child(n+7) { display: none; }
}

/* --- Ζεύγος επιλογών σε ένα πεδίο (π.χ. Τάξη: Β΄ + Γυμνασίου) -------- */
.pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: .6rem;
}
.pair select { width: 100%; }

/* Σε πολύ στενές οθόνες η μία κάτω από την άλλη, να μη στριμώχνονται */
@media (max-width: 380px) {
  .pair { grid-template-columns: 1fr; }
}

/* --- Πεδία σε στοίβα: ένα ανά σειρά ---------------------------------- */
.stackfields .field { margin-bottom: 1.05rem; }

/* --- Σήμανση υποχρεωτικών / προαιρετικών πεδίων ---------------------- */
.field label .tag {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .16em .55em .2em;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.5;
}
.field label .tag--req { background: rgba(217, 79, 69, .045); color: rgba(176, 58, 49, .42); }
.field label .tag--opt { background: rgba(14, 139, 134, .05);  color: rgba(14, 139, 134, .5); }

/* --- Πεδία που γράφονται με κεφαλαία --------------------------------- */
.upper { text-transform: uppercase; }

/* --- Κεντράρισμα περιεχομένου ---------------------------------------- */
/* Κεντράρεται η στήλη και οι επικεφαλίδες. Οι ετικέτες της φόρμας
   παραμένουν αριστερά — κεντραρισμένες ετικέτες κουράζουν το μάτι,
   γιατί χάνεται το σταθερό σημείο από όπου ξεκινά κάθε γραμμή. */
.stack .card { width: min(680px, 100%); margin-inline: auto; }

.card > h2,
.card > .lede,
.card > p:first-of-type { text-align: center; }
.card > h2 { margin-inline: auto; }

.masthead .wrap { text-align: center; }
.masthead h1,
.masthead p { margin-inline: auto; }
.masthead h1 { max-width: 20ch; }
.masthead__inst { justify-content: center; }

.actions { justify-content: center; }

/* --- Διαχείριση: μπάρες αναλογίας, ενέργειες γραμμής ------------------ */
.bar {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(91, 75, 204, .1);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--violet);
  border-radius: 999px;
  opacity: .75;
}

.rowacts { white-space: nowrap; }
.rowacts form { display: inline-block; margin: 0 .2rem 0 0; }

.btn--danger {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.btn--danger:hover { filter: brightness(.93); }

.tag--warn { background: #fdf0d8; color: #9a6b12; }

.filterbar { margin-top: -.4rem; }

.alert {
  border-radius: var(--r-md, 10px);
  padding: .8rem 1rem;
  margin-bottom: 1.2rem;
}
.alert--ok {
  background: #d9f2ee;
  border: 1px solid rgba(14, 139, 134, .3);
  color: #0b5f5c;
  border-radius: var(--r-md, 10px);
  padding: .8rem 1rem;
  margin-bottom: 1.2rem;
}

/* --- Ρυθμίσεις για τη στενή γραμματοσειρά ---------------------------- */
h1, h2, h3 { letter-spacing: -.005em; }
.masthead h1 { font-weight: 800; }

/* --- Τίτλος με δύο ονόματα: Γλωσσοδρόμιο | Linguadrome --------------- */
.masthead h1 .sep {
  font-weight: 300;
  opacity: .38;
  padding: 0 .28em;
}
.masthead h1 .alt { opacity: .82; }

/* --- Σλόγκαν --------------------------------------------------------- */
.slogan {
  font-family: "Fira Sans Extra Condensed", "Fira Sans Condensed", sans-serif;
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--saffron);
  margin: .35rem auto 1.1rem;
}

/* --- Κεντράρισμα hero (ενισχυμένο) ----------------------------------- */
.masthead .wrap > * { margin-left: auto; margin-right: auto; }
.masthead .wrap > p { max-width: 62ch; }

/* =====================================================================
   Ρυθμίσεις εμφάνισης — τελική πινελιά
   ===================================================================== */

/* --- Θεσμική υπογραφή: λογότυπο κολλητά στη διαχωριστική γραμμή ------- */
.masthead__inst { gap: .55rem; }
.masthead__inst img { width: 60px; }
.masthead__inst-txt { padding-left: .8rem; }
.masthead__inst-txt span:first-child { font-size: 1.02rem; letter-spacing: .02em; }
.masthead__inst-txt span:last-child  { font-size: .95rem; }

@media (max-width: 640px) {
  .masthead__inst img { width: 48px; }
  .masthead__inst-txt span:first-child { font-size: .92rem; }
  .masthead__inst-txt span:last-child  { font-size: .86rem; }
}

/* --- «26 Σεπτεμβρίου · Ευρωπαϊκή Ημέρα Γλωσσών» ---------------------- */
.masthead .eyebrow {
  font-size: 1rem;
  letter-spacing: .1em;
  margin-top: 1.5rem;
}
@media (max-width: 640px) { .masthead .eyebrow { font-size: .86rem; } }

/* --- Σλόγκαν: κοντά στον τίτλο, με αέρα από κάτω --------------------- */
.masthead .slogan {
  color: #8fd3ff;                      /* παγωμένο γαλάζιο πάνω στο βαθύ μπλε */
  font-size: clamp(1.15rem, 3vw, 1.62rem);
  font-weight: 600;
  letter-spacing: .015em;
  margin: .5rem auto 3.4rem;           /* ≈ δύο κενές σειρές πριν το κείμενο */
}

/* --- Πιο φαρδιές κάρτες --------------------------------------------- */
.narrow { width: min(900px, 92vw); }
.stack .card { width: min(900px, 100%); }
.card { --measure: 74ch; }

/* --- Διαχείριση: τράπεζα ερωτημάτων ---------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.4rem;
}
.toolbar__group { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.toolbar .count {
  display: inline-block;
  margin-left: .3rem;
  padding: 0 .38em;
  border-radius: 999px;
  background: rgba(0, 0, 0, .12);
  font-size: .82em;
}

/* Ενδείξεις βαθμίδας στον κατάλογο */
.qtable tr.is-off { opacity: .5; }
.qtable td { vertical-align: top; }

/* Ομάδα πλαισίων επιλογής */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  cursor: pointer;
}
.checkbox input { width: 1.05rem; height: 1.05rem; accent-color: var(--violet); }

/* --- Στήλες βαθμίδας με κουτάκια επιλογής ---------------------------- */
.lvlcol { text-align: center; width: 5.5rem; }
th.lvlcol { font-size: .78rem; }
.lvlbox { margin: 0; display: block; }
.lvlbox input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--violet);
  cursor: pointer;
}

/* --- Email στα αποτελέσματα: μικρό, να μη σπρώχνει τις άλλες στήλες --- */
/* =====================================================================
   Σελίδα ερώτησης — χρώμα και ζωντάνια
   ===================================================================== */

/* Η μπάρα προόδου με διαβάθμιση αντί για μονόχρωμη */
.progress__bar {
  background: linear-gradient(90deg, var(--sea), var(--saffron) 55%, var(--coral));
}

/* Θεματική ως έγχρωμη πινακίδα */
.question__index { margin-bottom: .2rem; }
.topicchip {
  display: inline-block;
  padding: .3em .85em .34em;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(91,75,204,.14), rgba(14,139,134,.14));
  color: var(--violet);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .09em;
}

/* Το διακοσμητικό γλυφό: μεγαλύτερο, με απαλή διαβάθμιση */
.question__glyph {
  background: linear-gradient(150deg, var(--violet), var(--sea));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .16;
}

/* Λεπτή έγχρωμη κορδέλα στην κορυφή της κάρτας */
.card.question {
  position: relative;
  overflow: hidden;
}
.card.question::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--violet), var(--sea) 40%, var(--saffron) 72%, var(--coral));
}

/* --- Οι τρεις επιλογές ----------------------------------------------- */
.choices { display: grid; gap: .75rem; }

.choice {
  --tone: var(--violet);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.choice--0 { --tone: #5b4bcc; }   /* βιολετί */
.choice--1 { --tone: #0e8b86; }   /* θαλασσί-πράσινο */
.choice--2 { --tone: #d98014; }   /* κροκί */

.choice:hover { border-color: var(--tone); transform: translateX(2px); }

/* Το γράμμα σε έγχρωμο κύκλο */
.choice__key {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 12%, #fff);
  color: var(--tone);
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  transition: background .16s ease, color .16s ease;
}

.choice__text { line-height: 1.35; }

/* Το τσεκ εμφανίζεται μόνο στην επιλεγμένη */
.choice__tick { color: var(--tone); opacity: 0; transition: opacity .16s ease; }

.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice:has(input:checked) {
  border-color: var(--tone);
  background: color-mix(in srgb, var(--tone) 7%, #fff);
}
.choice:has(input:checked) .choice__key { background: var(--tone); color: #fff; }
.choice:has(input:checked) .choice__tick { opacity: 1; }

/* Ορατή εστίαση για πλοήγηση με πληκτρολόγιο */
.choice:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--tone) 40%, transparent); }

/* Εφεδρεία για παλιότερους browsers χωρίς :has() */
@supports not selector(:has(*)) {
  .choice input { position: static; opacity: 1; width: 1.1rem; height: 1.1rem; accent-color: var(--tone); }
  .choice__tick { display: none; }
}

@media (max-width: 520px) {
  .choice { padding: .85rem .9rem; gap: .7rem; }
  .choice__key { width: 2rem; height: 2rem; font-size: 1rem; }
}

/* =====================================================================
   Αποτέλεσμα — μεγάλο κυκλικό σκορ
   ===================================================================== */
.scoreboard { text-align: center; padding: .6rem 0 .3rem; }

.scorering {
  --tone: var(--violet);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 236px;
  height: 236px;
}
.scorering.is-ok    { --tone: #d98014; }
.scorering.is-good  { --tone: var(--violet); }
.scorering.is-great { --tone: var(--sea); }

.scorering svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.scorering circle { fill: none; stroke-width: 13; stroke-linecap: round; }
.scorering__track { stroke: rgba(22, 23, 58, .08) !important; }
.scorering__fill  { stroke: var(--tone) !important; animation: fillin 1.1s cubic-bezier(.22, .9, .3, 1) both; }

@keyframes fillin { from { stroke-dashoffset: 440; } }

.scorering__mid { position: relative; display: grid; line-height: 1; }
.scorering__num {
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: 5.8rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tone);
}
.scorering__den {
  margin-top: .3rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.scoreboard__label {
  margin: .8rem 0 1.6rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-surface-soft);
}

/* Τρία κουτάκια με τα υπόλοιπα μεγέθη */
.statrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  max-width: 480px;
  margin: 0 auto;
}
.statbox {
  display: grid;
  gap: .25rem;
  padding: .95rem .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.statbox__k {
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.statbox__v {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 520px) {
  .scorering { width: 186px; height: 186px; }
  .scorering__num { font-size: 4.4rem; }
  .statrow { gap: .5rem; }
  .statbox__k { font-size: 1.8rem; }
  .statbox__v { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scorering__fill { animation: none; }
}

/* =====================================================================
   Οι δύο κυκλικοί δείκτες της σελίδας ερώτησης
   ===================================================================== */
.dials {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.6rem;
  margin-top: 2rem;
  text-align: center;
}

.dial { --tone: var(--violet); }
.dial--q { --tone: var(--sea); }

.dial__circle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 136px;
  height: 136px;
}
.dial__circle svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dial__circle circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.dial__track { stroke: rgba(22, 23, 58, .09) !important; }
.dial__fill  { stroke: var(--tone) !important; transition: stroke-dashoffset 1s linear, stroke .5s ease; }

.dial__digits {
  position: relative;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: 2.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tone);
  transition: color .5s ease;
}

.dial__label {
  margin: .55rem 0 0;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  max-width: 11rem;
}

/* Προειδοποιήσεις χρόνου: κροκί στα 4 λεπτά, κοραλί στα 2 */
.dial--t.is-mid { --tone: #d98014; }
.dial--t.is-low { --tone: var(--coral); }
.dial--t.is-low .dial__digits { animation: pulse 1s ease-in-out infinite; }
.dial--t.is-over { --tone: var(--coral); opacity: .6; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* Η μπάρα κρατά μόνο τη βαθμίδα, μεγαλύτερη και στο κέντρο */
.quizbar__inner { justify-content: center; }
.quizbar__meta {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .dials { gap: 1.2rem; }
  .dial__circle { width: 112px; height: 112px; }
  .dial__digits { font-size: 2.2rem; }
  .dial__label { font-size: .8rem; max-width: 8.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dial--t.is-low .dial__digits { animation: none; }
  .dial__fill { transition: none; }
}

/* --- Η στιγμή της έναρξης: κεντραρισμένη και ευδιάκριτη ------------- */
.startzone {
  text-align: center;
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.btn--start {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .95rem 3.2rem;
  border-radius: 999px;
}
.startzone__note {
  margin: 1rem auto 0;
  max-width: 34ch;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

@media (max-width: 520px) {
  .btn--start { font-size: 1.15rem; padding: .9rem 1.5rem; width: 100%; }
  .btn--go    { font-size: 1.3rem; letter-spacing: .06em; padding: 1rem 1.5rem; }
  .startzone form { display: block; }
  .startzone__note { font-size: .95rem; }
}

/* --- Οδηγίες συμμετοχής με αριθμημένα βήματα ------------------------- */
.howto { list-style: none; margin: 1.1rem 0 1.6rem; padding: 0; display: grid; gap: .9rem; }
.howto li { display: grid; grid-template-columns: auto 1fr; gap: .85rem; align-items: start; }
.howto__n {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}

/* --- Οθόνη ετοιμότητας ----------------------------------------------- */
.readylist {
  max-width: 46ch;
  margin: 1.4rem auto 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .5rem;
}
.btn--go { font-size: 1.5rem; letter-spacing: .08em; padding: 1.05rem 3.6rem; }

/* --- Κλείσιμο στη σελίδα αποτελέσματος -------------------------------- */
.endzone { text-align: center; margin-top: 1.4rem; }
.endzone .hint { max-width: 42ch; margin: .8rem auto 0; }

/* --- Κάρτες συνδέσμων στη σελίδα αποτελέσματος ------------------------ */
/* =====================================================================
   Προσαρμογή σε tablet και κινητό — τελικός έλεγχος
   ===================================================================== */

/* Οι πίνακες της διαχείρισης έχουν πολλές στήλες. Χωρίς οριζόντια
   κύλιση σπάνε τη σελίδα σε στενή οθόνη· έτσι κυλούν μόνοι τους. */
.card { overflow-x: auto; }
table.data { min-width: 34rem; }
.qtable { min-width: 46rem; }

/* Τίποτα δεν επιτρέπεται να ξεχειλίσει οριζόντια */
html, body { overflow-x: hidden; }
img, svg, table { max-width: 100%; }
.question__body, .choice__text, .dial__label, td, th { overflow-wrap: anywhere; }

/* --- Tablet (600–900px) ---------------------------------------------- */
@media (max-width: 900px) {
  .wrap { width: min(1080px, 94vw); }
  .narrow { width: min(900px, 94vw); }
  .stack .card { width: 100%; }
}

/* --- Κινητό ----------------------------------------------------------- */
@media (max-width: 600px) {
  .card { padding: 1.2rem 1rem; }
  h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  h2 { font-size: 1.3rem; }
  .masthead { padding: 2rem 0 2.4rem; }

  /* Η μπάρα του διαγωνισμού και τα κουμπιά δράσης */
  .quiz-actions { flex-direction: column; align-items: stretch; gap: .8rem; }
  .quiz-actions .btn { width: 100%; }
  .quiz-actions .hint { text-align: center; }

  /* Πλοήγηση διαχείρισης: να τυλίγεται αντί να ξεχειλίζει */
  .adminnav { flex-wrap: wrap; gap: .3rem; }
  .toolbar { gap: .5rem .8rem; }

  /* Ενέργειες γραμμής: η μία κάτω από την άλλη */
  .rowacts { white-space: normal; }
  .rowacts form { display: block; margin: .25rem 0 0; }

  /* Οι οδηγίες με τους αριθμούς */
  .howto__n { width: 1.7rem; height: 1.7rem; font-size: .95rem; }
}

/* --- Πολύ στενές οθόνες (έως 360px) ---------------------------------- */
@media (max-width: 360px) {
  .dials { flex-direction: column; align-items: center; gap: 1.2rem; }
  .statrow { grid-template-columns: 1fr; }
  .masthead__inst { flex-direction: column; gap: .5rem; text-align: center; }
  .masthead__inst-txt { border-left: 0; padding-left: 0; }
}

/* --- Εκτύπωση: χρήσιμο για την απονομή ------------------------------- */
@media print {
  .quizbar, .glyphband, .paperglyphs, .btn, .toolbar, .adminnav { display: none !important; }
  .card { border: 1px solid #ccc; box-shadow: none; overflow: visible; }
  body { background: #fff; }
}

/* --- Ζώνη μη αναστρέψιμων ενεργειών ---------------------------------- */
.dangerzone {
  margin-top: 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px dashed rgba(217, 79, 69, .35);
}
.dangerzone .hint { max-width: 62ch; margin-top: .6rem; }

/* --- Φόρμες μέσα σε κελιά πίνακα -------------------------------------- */
.inlineform {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  flex-wrap: wrap;
}
.inlineform input[type="text"],
.inlineform select {
  padding: .35rem .5rem;
  font-size: .86rem;
}

/* --- Σημείωση κάτω από τις δηλώσεις της φόρμας ------------------------ */
.consent__note {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* --- Κάρτα επιστροφής σε υπάρχουσα συμμετοχή -------------------------- */
.resume { text-align: center; }
.resume__who {
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--violet);
  margin: .4rem 0 1rem;
}
.resume p { max-width: 52ch; margin-inline: auto; }
.resume__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.6rem;
}
@media (max-width: 520px) {
  .resume__actions { flex-direction: column; }
  .resume__actions .btn { width: 100%; }
}

/* --- Ενημέρωση πριν την έναρξη, μέσα στην κάρτα οδηγιών --------------- */
/* --- Προεπισκόπηση βαθμίδων με κύκλους στην αρχική -------------------- */
.dials--sm { gap: 1rem; margin-top: 0; }
.dials--sm .dial__circle { width: 112px; height: 112px; }
.dials--sm .dial__digits { font-size: 2.1rem; }
.dials--sm .dial__label { font-size: .8rem; margin-top: .35rem; max-width: 7rem; }

@media (max-width: 400px) {
  .dials--sm { gap: .7rem; }
  .dials--sm .dial__circle { width: 94px; height: 94px; }
  .dials--sm .dial__digits { font-size: 1.75rem; }
}

/* --- Υπενθύμιση κάτω από τους δείκτες --------------------------------- */
.dials__note {
  text-align: center;
  margin: .9rem auto 0;
  font-size: .84rem;
  color: var(--ink-soft);
}
/* Οι οδηγίες σε μεγαλύτερο, πιο ευανάγνωστο μέγεθος */
.readylist { font-size: 1.02rem; line-height: 1.5; max-width: 52ch; }
.readylist li { margin-bottom: .15rem; }

/* --- Ένδειξη δυσκολίας στον κατάλογο ερωτήσεων ------------------------ */
.dchip.d1 { background: rgba(14, 139, 134, .12); color: #0b6f6b; }
.dchip.d2 { background: rgba(91, 75, 204, .12);  color: #4b3db3; }
.dchip.d3 { background: rgba(217, 79, 69, .12);  color: #b03a31; }
.rate { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Οθόνη επιλογής βαθμίδας ------------------------------------------ */
/* --- Ένδειξη τρέχουσας βαθμίδας --------------------------------------- */
/* --- Οδηγίες μέσα στη φόρμα, πριν από το κουμπί έναρξης --------------- */
.prestart .dials { margin-top: .6rem; }
.prestart .readylist { margin-top: 1.3rem; }

/* --- Αξιολόγηση με κύκλους -------------------------------------------- */
.rating {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.rating__q { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; }
.rating__scale {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  margin: 0 auto;
  max-width: 34rem;
}
.rating__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform .12s ease;
}
.rating__dot svg { position: absolute; inset: 0; }
.rating__num {
  position: relative;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c);
}
.rating__dot:hover { transform: translateY(-3px) scale(1.12); }
.rating__dot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 50%;
}
.rating__ends {
  display: flex;
  justify-content: space-between;
  max-width: 34rem;
  margin: .5rem auto 0;
  font-size: .78rem;
  color: var(--ink-soft);
}
.rating__thanks { margin: 0; font-size: 1.05rem; }

@media (max-width: 520px) {
  .rating__dot, .rating__dot svg { width: 38px; height: 38px; }
  .rating__num { font-size: .9rem; }
  .rating__scale, .rating__ends { max-width: 22rem; }
}

/* --- Παράθυρο ευχαριστίας --------------------------------------------- */
.thanksbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(22, 23, 58, .55);
  animation: fadein .2s ease both;
}
.thanksbox__card {
  width: min(30rem, 100%);
  padding: 2rem 1.6rem 1.7rem;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 24px 60px rgba(22, 23, 58, .3);
  animation: popin .26s cubic-bezier(.2, .9, .3, 1.1) both;
}
.thanksbox__mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: rgba(14, 139, 134, .12);
  color: var(--sea);
}
.thanksbox__card h2 { margin: 0 0 .6rem; }
.thanksbox__card p { margin: 0 auto .7rem; max-width: 34ch; }
.thanksbox__note { font-size: .9rem; color: var(--ink-soft); }
.thanksbox__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.3rem;
}

@keyframes fadein { from { opacity: 0; } }
@keyframes popin  { from { opacity: 0; transform: translateY(14px) scale(.96); } }

@media (max-width: 520px) {
  .thanksbox__actions { flex-direction: column; }
  .thanksbox__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .thanksbox, .thanksbox__card { animation: none; }
}

/* =====================================================================
   Διαχείριση: πλατύτερη διάταξη για οθόνη υπολογιστή
   ===================================================================== */
.wrap--admin { width: min(1720px, 96vw); }

/* Οι κάρτες δεν χρειάζονται πια οριζόντια κύλιση σε μεγάλες οθόνες */
@media (min-width: 1100px) {
  .wrap--admin .card { overflow-x: visible; }
  .wrap--admin table.data { min-width: 0; }
  .wrap--admin .qtable { min-width: 0; }
}

/* Πυκνότερες γραμμές: περισσότερες ερωτήσεις ανά οθόνη */
.wrap--admin table.data { font-size: .92rem; }
.wrap--admin table.data th,
.wrap--admin table.data td { padding-top: .5rem; padding-bottom: .5rem; }
.wrap--admin .card { padding: 1.4rem 1.5rem; }

/* Οι στήλες που δεν πρέπει να απλώνουν */
.wrap--admin .lvlcol { width: 5rem; }
.wrap--admin .rate   { width: 6.5rem; }
.wrap--admin .rowacts { width: 1%; }

/* Η εκφώνηση παίρνει τον χώρο που περισσεύει */
.qtable td:nth-child(2) { min-width: 22rem; }

/* Σε πολύ πλατιές οθόνες, όριο ώστε το κείμενο να μην απλώνει υπερβολικά */
@media (min-width: 1800px) {
  .wrap--admin .card > h2,
  .wrap--admin .card > p:not(.toolbar):not(.filterbar) { max-width: 90ch; }
}

/* --- Βαθμίδες με δική τους δυσκολία ----------------------------------- */
.levgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .9rem;
  margin-top: .3rem;
}
.levgrid__item {
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.levgrid__item .checkbox { margin-bottom: .6rem; }
.levgrid__item select { width: 100%; }

@media (max-width: 620px) { .levgrid { grid-template-columns: 1fr; } }

/* Επιλογή δυσκολίας μέσα στον κατάλογο, χρωματισμένη ανά βαθμό */
.dsel {
  width: 100%;
  margin-top: .3rem;
  padding: .2rem .3rem;
  font-size: .74rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.dsel.d1 { background: rgba(14, 139, 134, .12); color: #0b6f6b; }
.dsel.d2 { background: rgba(91, 75, 204, .12);  color: #4b3db3; }
.dsel.d3 { background: rgba(217, 79, 69, .12);  color: #b03a31; }

.wrap--admin .lvlcol { width: 7rem; }

/* --- Σελιδοποίηση αποτελεσμάτων --------------------------------------- */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin-top: 1.2rem;
}
.pager__gap { color: var(--ink-soft); padding: 0 .2rem; }

/* --- Δείκτες φόρτου στην Επισκόπηση ----------------------------------- */
.stats--live { margin-bottom: 1.6rem; }
.stat--alert {
  background: rgba(217, 79, 69, .1);
  border-color: rgba(217, 79, 69, .35);
}
.stat--alert b { color: var(--coral); }


/* =====================================================================
   Βελτιστοποίηση για κάθε συσκευή
   ===================================================================== */

/* Το κείμενο δεν σμικρύνεται αυτόματα όταν γυρίζει το κινητό */
html { -webkit-text-size-adjust: 100%; }

/* Τα πεδία να μη μεγεθύνουν τη σελίδα σε iPhone: κάτω από 16px, το Safari
   κάνει αυτόματο ζουμ μόλις τα αγγίξει ο χρήστης. */
@media (max-width: 820px) {
  input[type="text"], input[type="email"], input[type="number"],
  select, textarea { font-size: 16px; }
}

/* Άνετα σημεία αφής: 44px είναι το ελάχιστο για δάχτυλο */
@media (pointer: coarse) {
  .choice { min-height: 56px; }
  .btn { min-height: 44px; }
  .rating__dot { min-width: 44px; min-height: 44px; }
  .lvlbox input[type="checkbox"] { width: 1.35rem; height: 1.35rem; }
}

/* Σε οθόνες χωρίς ποντίκι, τα εφέ hover μπερδεύουν: μένουν κολλημένα
   μετά το άγγιγμα. Εφαρμόζονται μόνο όπου υπάρχει πραγματικός δείκτης. */
@media (hover: none) {
  .choice:hover, .pickstage__item:hover, .linkcards a:hover,
  .rating__dot:hover, .btn:hover { transform: none; }
}

/* Ομαλή κύλιση χωρίς κολλήματα σε παλιά κινητά */
.card, table.data { -webkit-overflow-scrolling: touch; }

/* Οι κινήσεις κοστίζουν σε φθηνές συσκευές: μόνο ό,τι χρειάζεται */
.glyphband__track { will-change: transform; }
.timer__fill, .dial__fill { will-change: stroke-dashoffset; }

/* Τοπίο σε κινητό: το ύψος είναι λίγο, μαζεύουμε τα κατακόρυφα κενά */
@media (max-height: 480px) and (orientation: landscape) {
  .masthead { padding: 1.2rem 0 1.4rem; }
  .dials { margin-top: 1rem; }
  .dial__circle { width: 92px; height: 92px; }
  .dial__digits { font-size: 1.7rem; }
  .glyphband { display: none; }
}

/* Πολύ μικρές οθόνες (έως 340px): τίποτα δεν πρέπει να ξεχειλίζει */
@media (max-width: 340px) {
  .wrap, .narrow { width: 94vw; }
  .card { padding: 1rem .8rem; }
  h1 { font-size: 1.55rem; }
  .btn--go { font-size: 1.05rem; letter-spacing: .04em; }
}

/* Σκοτεινό θέμα συσκευής: διατηρούμε το φωτεινό, αλλά χωρίς λευκή
   αναλαμπή κατά τη φόρτωση. */
@media (prefers-color-scheme: dark) {
  html { background: var(--surface); }
}

/* Εκτύπωση: τα υδατογραφήματα και οι κινήσεις δεν χρειάζονται */
@media print {
  .paperglyphs, .glyphband, .dials, .rating, .thanksbox { display: none !important; }
}

/* --- Προσωπικός κωδικός συμμετοχής ------------------------------------ */
.codebox {
  margin: 1.1rem 0 1rem;
  padding: 1.5rem 1rem;
  border: 2px dashed var(--violet);
  border-radius: 18px;
  background: rgba(91, 75, 204, .05);
  text-align: center;
}
.codebox__code {
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: clamp(2.6rem, 12vw, 3.6rem);
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--violet);
  line-height: 1;
  user-select: all;                 /* ένα άγγιγμα επιλέγει όλον τον κωδικό */
}
.codebox__hint {
  max-width: 46ch;
  margin: 0 auto 1.2rem;
  text-align: center;
  color: var(--ink-soft);
}
.readylist--code { margin-top: 1.2rem; }

.codeline {
  margin-top: 1.2rem;
  padding: .6rem .9rem;
  border-radius: 12px;
  background: rgba(91, 75, 204, .07);
  font-size: .95rem;
  text-align: center;
}
.codeline strong { letter-spacing: .08em; color: var(--violet); }

/* Υπενθύμιση στο τέλος του παιχνιδιού */
.codeback {
  margin-top: 1.8rem;
  padding: 1.3rem 1rem;
  border: 2px dashed var(--sea);
  border-radius: 18px;
  background: rgba(14, 139, 134, .06);
  text-align: center;
}
.codeback__lbl {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sea);
}
.codeback__code {
  margin: .3rem 0 .5rem;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: clamp(2.1rem, 9vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--sea);
  user-select: all;
}
.codeback__hint {
  max-width: 40ch;
  margin: 0 auto;
  font-size: .9rem;
  color: var(--ink-soft);
}

/* Πεδίο εισαγωγής κωδικού */
.codeinput {
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: 1.8rem !important;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
}

/* Σύνδεσμος επιστροφής στην αρχική */
.lookuplink {
  margin: 1.2rem 0 0;
  padding: .8rem 1rem;
  border-radius: 12px;
  background: rgba(14, 139, 134, .07);
  text-align: center;
  font-size: .95rem;
}

/* Γραμμή κατάταξης */
.rankline {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  background: var(--paper);
  text-align: center;
}
.rankline--good {
  background: rgba(242, 167, 27, .13);
  border: 1px solid rgba(242, 167, 27, .35);
  font-size: 1.05rem;
}
.resultline { text-align: center; margin-top: .8rem; }

/* Το μικρό όνομα στον χαιρετισμό: κεφαλαίο, όπως αποθηκεύεται */
.hi__name { color: var(--saffron); letter-spacing: .02em; }

/* --- Ειδοποίηση «διάλεξε πρώτα» --------------------------------------- */
/* Αντικαθιστά το ενσωματωμένο μήνυμα του browser, που εμφανιζόταν στη
   γλώσσα του προγράμματος περιήγησης και όχι της σελίδας. */
.pickfirst {
  margin: .9rem 0 0;
  padding: .7rem 1rem;
  border: 1px solid rgba(217, 79, 69, .4);
  border-radius: 12px;
  background: rgba(217, 79, 69, .09);
  color: var(--coral);
  font-weight: 600;
  text-align: center;
}
.pickfirst--shake { animation: pfshake .4s ease; }
@keyframes pfshake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .pickfirst--shake { animation: none; }
}

/* =====================================================================
   Σελίδα εκπαιδευτικού
   ===================================================================== */

/* Ο κωδικός του καθηγητή σε βιολετί, του μαθητή σε πράσινο: διαφορετική
   οπτική ταυτότητα, ώστε να μη συγχέονται. */
.kicker--teacher { color: var(--violet); }
.codebox--teacher { border-color: var(--violet); background: rgba(91, 75, 204, .06); }
.codebox--teacher .codebox__code { color: var(--violet); }
.codeinput--teacher { color: var(--violet); }

.classgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}
.classcard {
  padding: 1.1rem 1rem;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: center;
}
.classcard__code {
  margin: 0;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--violet);
  user-select: all;
}
.classcard__label { margin: .3rem 0 0; font-size: .95rem; font-weight: 600; }
.classcard__count { margin: .2rem 0 .9rem; font-size: .82rem; color: var(--ink-soft); }
.classcard__acts { display: flex; flex-direction: column; gap: .4rem; align-items: stretch; }
.classcard__acts form { margin: 0; }
.classcard__acts .btn { width: 100%; }

.addclass {
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.addclass summary { cursor: pointer; font-weight: 700; color: var(--violet); }
.addclass form { margin-top: 1rem; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
@media (max-width: 620px) { .grid3 { grid-template-columns: 1fr; } }

.notice--ok        { border-color: var(--sea); background: #e7f5f4; color: #0a5f5b; }
.notice--ok strong { color: var(--sea); }

/* Ένα μήνυμα στην κορυφή της στοίβας πέφτει μέσα στη ζώνη που επικαλύπτει
   τη σκούρα κεφαλίδα — το «.stack» ανεβάζει το περιεχόμενο κατά 2,4rem.
   Οι κάρτες έχουν λευκό φόντο και σκιά, οπότε δείχνουν σωστά· ένα μήνυμα
   χωρίς αυτά φαινόταν κομμένο στη μέση. Του δίνουμε την ίδια υπόσταση. */
.stack > .notice {
  position: relative;
  z-index: 2;
  padding: 1rem 1.2rem;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  box-shadow: 0 10px 30px rgba(22, 23, 58, .12);
}
.stack > .notice p:last-child { margin-bottom: 0; }

/* --- Προβολή κωδικού στην τάξη ---------------------------------------- */
body.board { background: var(--surface); }
.boardwrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 2rem 1rem;
  text-align: center;
}
.board__where { margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); color: var(--on-surface-soft); }
.board__lbl {
  margin: 1.2rem 0 0;
  font-size: clamp(.9rem, 2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-surface-acc);
}
.board__code {
  margin: .2rem 0 1.4rem;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: clamp(4rem, 22vw, 15rem);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
  color: #fff;
  user-select: all;
}
.board__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bs;
  display: grid;
  gap: .5rem;
  font-size: clamp(.95rem, 2.2vw, 1.4rem);
  color: #d7d5ea;
}
.board__steps li { counter-increment: bs; }
.board__steps li::before {
  content: counter(bs);
  display: inline-grid;
  place-items: center;
  width: 1.7em; height: 1.7em;
  margin-right: .6em;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: .8em;
  font-weight: 700;
}

/* Στη σελίδα προβολής το φόντο είναι σκούρο: το υποσέλιδο θέλει φωτεινά
   γράμματα, αλλιώς το κείμενο του εργαστηρίου χάνεται. */
body.board .site { background: transparent; border-top: 1px solid rgba(255,255,255,.14); }
body.board .site__lab p,
body.board .site__legal { color: #c9c6e8; }
body.board .site__legal a { color: #e2e0f2; }
body.board .site__lab img { background: #fff; border-radius: 6px; padding: 4px; }

/* Η μάσκα του κωδικού είναι οδηγία, όχι δείγμα: αχνή και σε ίσο πλάτος */
.codeinput::placeholder { color: var(--line); letter-spacing: .18em; font-weight: 700; }

/* Τίτλος δευτερεύουσας σελίδας: μικρότερος από της αρχικής, ώστε να μην
   ανταγωνίζεται το όνομα του ιδρύματος από πάνω. */
.h1--sub { font-size: clamp(1.6rem, 4.2vw, 2.4rem); }

/* Διευκρίνιση δίπλα στην ετικέτα πεδίου */
.lblnote {
  display: block;
  margin-top: .15rem;
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
  text-transform: none;
}

/* Το ίδρυμα στη σελίδα προβολής: πιο διακριτικό, αφού πρωταγωνιστεί ο κωδικός */
.board__inst { margin-bottom: 1.4rem; opacity: .8; }

/* --- Ροή με κωδικό τάξης ---------------------------------------------- */
.codeform { max-width: 22rem; margin: 1.4rem auto 0; text-align: center; }
.codeform .btn { width: 100%; }
.codeinput--class { color: var(--sea); }
.nocode { text-align: center; margin-top: 1.4rem; line-height: 1.7; }

/* Τα στοιχεία που έρχονται από τον κωδικό: εμφανίζονται, δεν πληκτρολογούνται */
.fromcode {
  display: flex;
  gap: .7rem;
  align-items: center;
  margin: 1.1rem 0 0;
  padding: .85rem 1rem;
  border: 1px solid rgba(14, 139, 134, .3);
  border-radius: 14px;
  background: rgba(14, 139, 134, .06);
  font-size: .95rem;
  line-height: 1.45;
}
.fromcode svg { flex: none; width: 22px; height: 22px; color: var(--sea); }
/* Σύνδεσμος διόρθωσης, αν κάποιος έγραψε λάθος κωδικό τάξης */
.fromcode__back {
  margin-left: auto;
  flex: none;
  align-self: center;
  font-size: .85rem;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .fromcode { flex-wrap: wrap; }
  .fromcode__back { margin-left: 32px; margin-top: .3rem; }
}

/* --- Λίστα συμμετεχόντων τμήματος -------------------------------------- */
.roster { width: 100%; margin-top: 1rem; }
.roster th, .roster td { padding: .55rem .6rem; text-align: left; }
.roster thead th {
  border-bottom: 2px solid var(--line);
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.roster tbody tr + tr td { border-top: 1px solid var(--line); }

.pill {
  display: inline-block;
  padding: .12rem .55rem;
  border-radius: 99px;
  background: var(--paper);
  font-size: .8rem;
  white-space: nowrap;
}
.pill--ok   { background: rgba(14, 139, 134, .13); color: var(--sea); }
.pill--warn { background: rgba(217, 128, 20, .15); color: #a8620d; }
.pill--soft { color: var(--ink-soft); }

.classcard__avg { color: var(--sea); font-weight: 600; }

/* Σε στενή οθόνη ο πίνακας κυλά οριζόντια αντί να στριμώχνεται */
@media (max-width: 560px) {
  .roster { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --- Φίλτρα αποτελεσμάτων και σελίδα εκπαιδευτικών --------------------- */
.pickfilters {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: flex-end;
  margin: 1rem 0;
}
.pickfilters .field { margin: 0; min-width: 240px; flex: 1 1 240px; }
.pickfilters select { max-width: 100%; }

.tcode { font-weight: 700; letter-spacing: .06em; color: var(--violet); }
.row--flag { background: rgba(242, 167, 27, .08); }
.cell--flag { font-weight: 700; color: #a8620d; }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink-soft); font-size: .85em; }

/* Έντονη οδηγία γλώσσας στα πεδία κωδικού: με λατινικό πληκτρολόγιο το
   πεδίο δεν δέχεται τίποτα, οπότε η υπόδειξη πρέπει να φαίνεται πριν
   αρχίσει να πληκτρολογεί ο χρήστης. */
.lblnote--strong {
  display: block;
  margin-top: .3rem;
  padding: .35rem .6rem;
  border-radius: 8px;
  background: rgba(242, 167, 27, .16);
  border: 1px solid rgba(242, 167, 27, .4);
  color: #8a5008;
  font-size: .82rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* Προειδοποίηση όταν εντοπιστεί λατινικό γράμμα */
.codewarn {
  margin: .5rem 0 0;
  padding: .45rem .7rem;
  border-radius: 8px;
  background: rgba(217, 79, 69, .1);
  border: 1px solid rgba(217, 79, 69, .35);
  color: var(--coral);
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
}

/* Ένδειξη παράτασης στην κάρτα τμήματος */
.classcard__extra {
  display: inline-block;
  margin-top: .2rem;
  padding: .1rem .5rem;
  border-radius: 99px;
  background: rgba(14, 139, 134, .13);
  color: var(--sea);
  font-size: .78rem;
  font-weight: 700;
}

/* Διόρθωση στοιχείων μαθητή: κρυμμένη μέχρι να τη ζητήσει ο εκπαιδευτικός,
   ώστε ο πίνακας να μένει ευανάγνωστος. */
.fixname summary { cursor: pointer; color: var(--violet); font-size: .85rem; }
.fixname form { margin-top: .6rem; display: grid; gap: .4rem; min-width: 190px; }
.fixname label { display: grid; gap: .15rem; font-size: .78rem; color: var(--ink-soft); }
.fixname input { padding: .35rem .5rem; font-size: .9rem; }

/* Επιβεβαίωση σχολείου, όταν η γραφή μοιάζει με υπάρχουσα */
.schoolpick { display: grid; gap: .6rem; margin: 1.2rem 0; }
.schoolpick__opt {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .8rem 1rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.schoolpick__opt:has(input:checked) {
  border-color: var(--sea);
  background: rgba(14, 139, 134, .06);
}
.schoolpick__opt input { margin-top: .2rem; width: 1.2rem; height: 1.2rem; flex: none; }
.schoolpick__opt em { color: var(--ink-soft); font-size: .85em; font-style: normal; }

/* Τα τμήματα του εκπαιδευτικού, ως πατητά σήματα μέσα στον πίνακα */
.clschips { display: flex; flex-wrap: wrap; gap: .25rem; }
.clschip {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .12rem .45rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  font-size: .82rem;
  font-weight: 700;
  color: var(--violet);
  text-decoration: none;
  white-space: nowrap;
}
.clschip:hover { border-color: var(--violet); background: rgba(91, 75, 204, .07); }
.clschip em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.clschip b {
  min-width: 1.15em;
  padding: 0 .28em;
  border-radius: 99px;
  background: rgba(14, 139, 134, .14);
  color: var(--sea);
  font-size: .9em;
  text-align: center;
}

/* Διακριτικός σύνδεσμος-κουμπί, για δευτερεύουσες ενέργειες μέσα σε κάρτα */
.linkbtn {
  border: 0;
  background: none;
  padding: .2rem 0 0;
  font: inherit;
  font-size: .82rem;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}
.linkbtn:hover { color: var(--coral); }
.classcard__count a { color: inherit; }

/* =====================================================================
   Πρόλογος — η σελίδα υποδοχής με την αντίστροφη μέτρηση
   ===================================================================== */

/* Ο διάδρομος απογείωσης: γράμματα διαφορετικών αλφαβήτων που μικραίνουν
   και ξεθωριάζουν προς τον ορίζοντα. Καθαρό CSS, καμία εικόνα. */
.runway { text-align: center; overflow: hidden; }
.runway__strip {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(.2rem, 1.4vw, .7rem);
  margin: .2rem 0 1.6rem;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-weight: 800;
  line-height: 1;
  user-select: none;
}
.runway__strip span {
  /* Κάθε γράμμα μικραίνει και χάνει χρώμα όσο απομακρύνεται από το κέντρο:
     το «--i» δίνει τη θέση του και το «abs()» τη συμμετρία. */
  --d: max(calc(4.5 - var(--i)), calc(var(--i) - 4.5));
  font-size: calc(2.9rem - var(--d) * .38rem);
  opacity: calc(1 - var(--d) * .17);
  color: var(--violet);
  transform: translateY(calc(var(--d) * .12rem));
}
.runway__strip span:nth-child(2n)  { color: var(--sea); }
.runway__strip span:nth-child(3n)  { color: var(--saffron); }

.runway__lead {
  margin: 0 0 .8rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Το χρονόμετρο */
.cdown {
  display: flex;
  justify-content: center;
  gap: clamp(.5rem, 2.4vw, 1.1rem);
  margin-bottom: 1.5rem;
}
.cdown__cell {
  flex: 0 1 8.5rem;
  padding: 1rem .5rem .8rem;
  border-radius: var(--r-md);
  background: var(--surface);
  color: #fff;
}
.cdown__cell b {
  display: block;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  font-weight: 800;
  line-height: .95;
  /* Σταθερό πλάτος ψηφίων: ο αριθμός δεν χοροπηδά στην αλλαγή λεπτού. */
  font-variant-numeric: tabular-nums;
}
.cdown__cell span {
  display: block;
  margin-top: .3rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-surface-soft);
}
.cdown__cell:first-child b { color: var(--on-surface-acc); }
.cdown--go .cdown__cell b  { color: var(--on-surface-acc); }

.runway__when { max-width: 46ch; margin: 0 auto 1.1rem; }
.runway__note {
  max-width: 48ch;
  margin: 0 auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .95rem;
  color: var(--ink-soft);
}

@media (max-width: 520px) {
  .cdown { gap: .4rem; }
  .cdown__cell { padding: .7rem .3rem .6rem; }
  .cdown__cell span { font-size: .68rem; letter-spacing: .08em; }
  .runway__strip span { font-size: calc(2rem - var(--d) * .26rem); }
}

/* =====================================================================
   Επιλογή έναρξης — «ξεκινάω τώρα» ή «θα συνεχίσω αργότερα»
   ===================================================================== */

.choose__title { text-align: center; margin-bottom: .3rem; }
.choose__lead {
  max-width: 44ch;
  margin: 0 auto 1.3rem;
  text-align: center;
  color: var(--ink-soft);
}
.choose { display: grid; gap: .9rem; }
@media (min-width: 620px) { .choose { grid-template-columns: 1fr 1fr; } }

/* Οι δύο επιλογές είναι ισότιμες στο μέγεθος: καμία δεν πιέζει τον μαθητή.
   Ξεχωρίζουν μόνο στο χρώμα — πράσινο η άμεση, βιολετί η αναβολή. */
.choose__opt {
  display: block;
  width: 100%;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
}
.choose__opt:hover  { transform: translateY(-2px); }
.choose__opt:active { transform: none; }
.choose__hd {
  display: block;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
}
.choose__sub {
  display: block;
  margin-top: .25rem;
  font-size: .92rem;
  color: var(--ink-soft);
}
.choose__opt--now        { border-color: var(--sea); }
.choose__opt--now:hover  { background: rgba(14, 139, 134, .07); }
.choose__opt--now .choose__hd { color: var(--sea); }
.choose__opt--later:hover     { background: rgba(91, 75, 204, .06); border-color: var(--violet); }
.choose__opt--later .choose__hd { color: var(--violet); }

/* --- Η οθόνη «θα συνεχίσω αργότερα» ----------------------------------- */
.laterbox { text-align: center; }
.laterbox__tick {
  width: 3rem; height: 3rem;
  margin: 0 auto .6rem;
  border-radius: 50%;
  background: rgba(14, 139, 134, .13);
  color: var(--sea);
  font-size: 1.6rem;
  line-height: 3rem;
  font-weight: 700;
}
.laterbox__code {
  margin: .6rem 0 1rem;
  padding: 1.1rem .6rem;
  border: 2px dashed var(--violet);
  border-radius: 18px;
  background: rgba(91, 75, 204, .05);
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--violet);
  user-select: all;
}
.laterbox__lead { max-width: 44ch; margin: 0 auto 1rem; }
.laterbox__steps {
  max-width: 30rem;
  margin: 0 auto 1.2rem;
  padding: 0;
  list-style: none;
  counter-reset: lb;
  display: grid;
  gap: .5rem;
  text-align: left;
}
.laterbox__steps li { counter-increment: lb; }
.laterbox__steps li::before {
  content: counter(lb);
  display: inline-grid;
  place-items: center;
  width: 1.6em; height: 1.6em;
  margin-right: .55em;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: .8em;
  font-weight: 700;
}
.laterbox__warn {
  max-width: 42ch;
  margin: 0 auto 1.4rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  background: rgba(242, 167, 27, .14);
  border: 1px solid rgba(242, 167, 27, .38);
  font-size: .93rem;
  color: #8a5008;
}

/* Ο μαθητής που ολοκλήρωσε και επιστρέφει πριν λήξει ο διαγωνισμός */
.donebox { text-align: center; }
.donebox__tick {
  width: 3rem; height: 3rem;
  margin: 0 auto .6rem;
  border-radius: 50%;
  background: rgba(14, 139, 134, .13);
  color: var(--sea);
  font-size: 1.6rem;
  line-height: 3rem;
  font-weight: 700;
}
.donebox__lead { max-width: 42ch; margin: 0 auto .8rem; font-size: 1.05rem; }
.donebox__when { max-width: 46ch; margin: 0 auto 1.4rem; color: var(--ink-soft); }

/* Το κουμπί δημιουργίας τμήματος, κεντραρισμένο κάτω από τα τρία πεδία */
.addclass__go { margin: 1.1rem 0 0; text-align: center; }

/* Ο προσωπικός κωδικός στα αποτελέσματα: για να διαβάζεται και να λέγεται */
.pcode { font-weight: 700; letter-spacing: .06em; color: var(--sea); white-space: nowrap; }

/* Οι δύο επιλογές έναρξης: γεμάτο χρώμα, ώστε να ξεχωρίζουν αμέσως */
.choose__opt--now {
  border-color: var(--sea);
  background: rgba(14, 139, 134, .1);
}
.choose__opt--now:hover { background: rgba(14, 139, 134, .18); }
.choose__opt--later {
  border-color: var(--violet);
  background: rgba(91, 75, 204, .09);
}
.choose__opt--later:hover { background: rgba(91, 75, 204, .17); }
.choose__opt .choose__sub { color: var(--ink); opacity: .8; }

/* --- Η οθόνη αποχαιρετισμού -------------------------------------------- */
.byebox { text-align: center; }
.byebox__tick {
  width: 3.4rem; height: 3.4rem;
  margin: 0 auto .9rem;
  border-radius: 50%;
  background: rgba(14, 139, 134, .14);
  color: var(--sea);
  font-size: 1.8rem;
  line-height: 3.4rem;
  font-weight: 700;
}
.byebox__lbl {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sea);
}
.byebox__code {
  margin: .3rem 0 .8rem;
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: clamp(2.6rem, 12vw, 3.8rem);
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  color: var(--sea);
  user-select: all;
}
.byebox__hint { max-width: 44ch; margin: 0 auto 1.2rem; color: var(--ink-soft); }
.byebox__thanks {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-family: "Fira Sans Extra Condensed", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--saffron);
}
.byenext { text-align: center; }
.byenext__go { margin: 1.1rem 0 .8rem; }



/* =====================================================================
   Οι δύο διαδρομές της αρχικής, δίπλα-δίπλα
   ===================================================================== */

/* Ο κανόνας «.card + .card» δίνει απόσταση σε διαδοχικές κάρτες. Η «.paths»
   δεν είναι κάρτα, οπότε δεν έπαιρνε καμία και κολλούσε στο προηγούμενο —
   ενώ η δεύτερη κάρτα ΜΕΣΑ της την έπαιρνε άδικα και κατέβαινε. */
.paths { display: grid; gap: 1.1rem; margin-top: 1.4rem; }
.paths .card + .card { margin-top: 0; }
@media (min-width: 700px) {
  .paths { grid-template-columns: 1fr 1fr; align-items: start; }
}

.path { display: flex; flex-direction: column; text-align: center; }
.path h2 { margin: .1rem 0 .4rem; font-size: clamp(1.4rem, 4vw, 1.8rem); }
.path__lead {
  min-height: 3.2em;              /* ίδιο ύψος, ώστε τα πεδία να ευθυγραμμίζονται */
  margin: 0 auto 1rem;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: .96rem;
}
.path .field { text-align: left; }
.path .btn--start { width: 100%; }
.path__foot {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-size: .86rem;
  color: var(--ink-soft);
}

/* Η ετικέτα στην κορυφή δηλώνει ποια διαδρομή είναι ποια */
.path__tag {
  margin: 0;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sea);
}
.path__tag--back { color: var(--violet); }

.path--start { border-top: 4px solid var(--sea); }
.path--back  { border-top: 4px solid var(--violet); }
.path--start h2 { color: var(--sea); }
.path--back  h2 { color: var(--violet); }
.path--back .codeinput { color: var(--violet); }

/* Κουμπί στο βιολετί της συνέχισης */
.btn--violet {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
}
.btn--violet:hover { background: #4a3cb0; border-color: #4a3cb0; }

@media (max-width: 699px) {
  .path__lead { min-height: 0; }
}