/* ════════════════════════════════════════════════════════════════════
   tense-cards.css — «Κάρτες ανά έγκλιση» (js/tense-cards.js)

   Ίδια διάταξη και markup σε τρεις επιφάνειες: επιλογέας ύλης (.lp),
   πλέγμα επιπέδων παιχνιδιού (.gpx-pick), οθόνη επιπέδων (.ls-root).
   Κάθε επιφάνεια δίνει τα δικά της χρώματα μέσα από τις --tc-* (στο
   τέλος του αρχείου)· οι προεπιλογές εδώ στέκουν και μόνες τους.

   ΣΤΗΛΕΣ ΑΠΟ ΤΟ ΠΛΑΤΟΣ ΤΟΥ ΔΟΧΕΙΟΥ, όχι της οθόνης (container queries):
   το ίδιο πλέγμα ζει σε πάνελ με εσοχή 52px, σε κάρτα παιχνιδιού 1320px
   και σε στήλη σελίδας. 3 στήλες ≥ 780px · 2 στήλες ≥ 460px · αλλιώς 1
   (κινητό 390px → μία κάρτα στη σειρά, χωρίς οριζόντια κύλιση). Το όριο
   ΔΕΝ είναι 600: το πάνελ του επιλογέα έχει εσοχή, άρα σε οθόνη 600–730px
   το δοχείο του είναι 510–530px — και έπεφτε σε μία ψηλή στήλη ~1700px,
   άδεια στα δεξιά. Δύο στήλες χωρούν άνετα από τα 460px.
   ΡΥΘΜΟΣ ΜΕΣΑ ΣΤΗΝ ΚΑΡΤΑ: οι 6 χρόνοι μιας φωνής πάνε 3 + 3 σε στήλες, όχι
   5 + 1 με το «Υπερσ.» μόνο του (SymTenseCards.balance + [data-cols]).

   Ελληνικά: κανένα text-transform.
   ════════════════════════════════════════════════════════════════════ */
.tc {
  --tc-ink:   var(--fg, #2B241C);
  --tc-mut:   color-mix(in srgb, var(--muted, #8A7F70) 70%, var(--fg, #2B241C));
  --tc-line:  var(--line, #E4DACB);
  --tc-card:  var(--card, #FFFDF8);
  --tc-btn:   var(--card, #FFFFFF);
  --tc-hover: var(--sink, #EFE8DA);
  --tc-ok:    #2e9e4f;
  --tc-acc:   var(--ca, var(--terra, #2E7BB5));
  --tc-font-h: inherit;
  container-type: inline-size;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0; color: var(--tc-ink);
}
.tc *, .tc *::before, .tc *::after { box-sizing: border-box; }

/* ── πλέγμα καρτών ── */
.tc .tc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@container (max-width: 779px) { .tc .tc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 459px) { .tc .tc-grid { grid-template-columns: minmax(0, 1fr); } }

.tc .tc-card {
  min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 11px 12px 13px; background: var(--tc-card);
  border: 1.5px solid var(--tc-line); border-radius: 14px;
  transition: border-color .14s;
}
.tc .tc-card.is-on { border-color: var(--tc-ok); }
.tc .tc-card__hd { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.tc .tc-card__t {
  flex: 1; min-width: 0; margin: 0; font-family: var(--tc-font-h); font-weight: 700;
  font-size: 15.5px; line-height: 1.2; color: var(--tc-ink); letter-spacing: .005em;
  overflow-wrap: anywhere;
}
.tc .tc-card__st { flex: none; font-size: 12px; font-weight: 700; color: var(--tc-mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* πράσινο ΚΕΙΜΕΝΟ: --tc-ok-ink (σκουρότερο, ≥ 4.5:1)· γεμίσματα και περιγράμματα μένουν --tc-ok */
.tc .tc-card__st.is-on { color: var(--tc-ok-ink, var(--tc-ok)); }
/* «Όλα / Κανένα» της κάρτας: το κουμπί της επιφάνειας (π.χ. .lp-pill), μικρότερο */
.tc .tc-card__hd > button, .tc .tc-card__hd > span:not(.tc-card__st) { flex: none; }

/* ── μία γραμμή ανά φωνή: ετικέτα, μετά τα κουμπιά των χρόνων ── */
.tc .tc-voice { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.tc .tc-voice__l {
  align-self: flex-start; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  color: var(--tc-mut); background: none; border: 0; padding: 2px 4px 2px 0; margin: 0;
  border-radius: 6px;
}
/* Επιλογέας: η ετικέτα της φωνής είναι κουμπί («όλοι οι χρόνοι της φωνής»).
   Διακεκομμένη υπογράμμιση = «πατιέται» και στην αφή· το ::after δίνει
   περιοχή αφής ~32px χωρίς να μετακινεί τα κουμπιά των χρόνων. */
.tc--multi .tc-voice { margin-top: 8px; }
.tc button.tc-voice__l {
  position: relative; cursor: pointer;
  text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.tc button.tc-voice__l::after { content: ''; position: absolute; inset: -8px -10px -5px -6px; }
.tc button.tc-voice__l:hover { color: var(--tc-ink); text-decoration-style: solid; }
.tc button.tc-voice__l[aria-pressed="true"] { color: var(--tc-ok-ink, var(--tc-ok)); }
.tc button.tc-voice__l:focus-visible { outline: 2px solid var(--tc-acc); outline-offset: 2px; }
/* Γραμμή ΧΩΡΙΣ ετικέτα (μία γραμμή στην κάρτα, π.χ. εἰμί): καμία ετικέτα στην
   εξάσκηση· στον επιλογέα μένει το κουμπί της γραμμής, μικρό («Όλοι οι χρόνοι»). */
.tc .tc-voice--bare { margin-top: 4px; }
.tc button.tc-voice__l--all { font-size: 11.5px; font-weight: 600; }
.tc .tc-tenses { display: flex; flex-wrap: wrap; gap: 6px; }
/* Ισόρροπες γραμμές (SymTenseCards.balance): όταν το flex-wrap σπάει άνισα
   (5 + 1, 3 + 1), η φωνή γίνεται πλέγμα με --tc-cols στήλες — 3 + 3, 2 + 2 —
   και τα κουμπιά στοιχίζονται σε στήλες (Ενεστ. / Αόρ. ο ένας κάτω από τον άλλο). */
.tc .tc-tenses[data-cols] { display: grid; grid-template-columns: repeat(var(--tc-cols, 3), max-content); justify-items: start; }
/* justify-items:start — τα κουμπιά κρατούν το φυσικό τους πλάτος (όπως στο
   σχέδιο), δεν τεντώνονται στο πλάτος της στήλης: χωρίς αυτό το «Αόρ.»
   γινόταν 98px επειδή από πάνω του στεκόταν το «✓ Ενεστ. 128». Οι φωνές της
   ίδιας κάρτας μοιράζονται πλάτη στηλών (balance → grid-template-columns). */
/* …ή ροή (data-flow): όταν ένα «✓ Ενεστ. 40» θα άφηνε τρύπα σε στήλη, ίδιος
   αριθμός ανά γραμμή αλλά στο φυσικό πλάτος (σχέδιο Γ). Οι .tc-br σπάνε τη
   γραμμή· row-gap 0 + margin στις επόμενες γραμμές, ώστε η γραμμή μηδενικού
   ύψους του σπασίματος να μη διπλασιάζει το κενό. */
.tc .tc-tenses[data-cols][data-flow] { display: flex; row-gap: 0; }
.tc .tc-tenses > .tc-br { flex: 0 0 100%; height: 0; margin: 0; padding: 0; }
.tc .tc-tenses[data-flow] > .tc-br ~ .tc-t { margin-top: 6px; }

/* ── το κουμπί του χρόνου ──
   Το χρώμα του χρόνου είναι η λεπτή αριστερή ράβδος (--tc-c), ποτέ γέμισμα.
   Σημάδι πριν από την ετικέτα μόνο όπου υπάρχει κατάσταση (🔒 / ✓ / τελεία)·
   το «επιλεγμένο» είναι γέμισμα + ✓ στη γωνία, χωρίς αλλαγή πλάτους. */
.tc .tc-t {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 5px 10px 5px 9px; margin: 0;
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.1; white-space: nowrap;
  color: var(--tc-ink); background: var(--tc-btn);
  border: 1.5px solid var(--tc-line); border-left: 3px solid var(--tc-c, var(--tc-line));
  border-radius: 9px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.tc .tc-t:hover { background: var(--tc-hover); border-color: color-mix(in srgb, var(--tc-ink) 26%, transparent); border-left-color: var(--tc-c, var(--tc-line)); }
.tc .tc-t:focus-visible { outline: 2px solid var(--tc-acc); outline-offset: 2px; }
.tc .tc-t__l { min-width: 0; }
.tc .tc-t__mk { flex: none; display: inline-grid; place-items: center; line-height: 1; }
.tc .tc-t__pts { font-size: 11px; font-weight: 700; color: var(--tc-mut); font-variant-numeric: tabular-nums; }

/* επιλεγμένο (επιλογέας): γέμισμα όπως το .on των γραμμών + ✓ στη γωνία */
.tc .tc-t.is-on { color: var(--tc-ok-ink, var(--tc-ink)); background: color-mix(in srgb, var(--tc-ok) 13%, var(--tc-btn)); border-color: var(--tc-ok); border-left-color: var(--tc-c, var(--tc-ok)); }
.tc .tc-t.is-on:hover { background: color-mix(in srgb, var(--tc-ok) 19%, var(--tc-btn)); border-color: var(--tc-ok); }
.tc .tc-t__sel {
  position: absolute; top: -7px; right: -6px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--tc-ok); box-shadow: 0 0 0 2px var(--tc-card);
  pointer-events: none;
}
/* ολοκληρωμένο στον επιλογέα (cfg.levelDone): μικρό ΓΚΡΙ ✓ πριν από την
   ετικέτα. Το πράσινο ✓ σημαίνει ΜΟΝΟ «στη μείξη» (γέμισμα + ✓ στη γωνία). */
.tc .tc-t__mk--done { font-size: 12px; font-weight: 700; color: var(--tc-mut); }

/* κλειδωμένο: 🔒, θαμπό, ΠΟΤΕ επιλεγμένο — το κλικ ανοίγει την προτροπή συνδρομής */
.tc .tc-t.is-lock { opacity: .62; border-left-color: var(--tc-line); padding: 5px 8px 5px 7px; gap: 3px; }
.tc .tc-t.is-lock:hover { background: var(--tc-btn); opacity: .82; }
.tc .tc-t__mk--lock { font-size: 11px; }
/* η σημείωση «Απαιτείται συνδρομή» μπαίνει μέσα στην κάρτα, κάτω από τη φωνή
   που πατήθηκε (παιχνίδι: .gpx-shut-note · οθόνη επιπέδων: .ls-locknote) */
.tc .tc-card .gpx-shut-note, .tc .tc-cgrp .gpx-shut-note, .tc .ls-locknote {
  margin: 8px 0 2px; padding: 8px 11px; border-radius: 10px;
  font-size: 13px; font-style: normal; font-weight: 600; line-height: 1.35; text-align: left;
  color: var(--tc-ink); background: var(--tc-hover); border: 1px solid var(--tc-line);
}

/* single (εξάσκηση): ✓ ολοκληρωμένο · τελεία = σε εξέλιξη · σκέτο = νέο */
.tc--single .tc-t.is-done { background: color-mix(in srgb, var(--tc-ok) 8%, var(--tc-btn)); border-color: color-mix(in srgb, var(--tc-ok) 45%, var(--tc-line)); border-left-color: var(--tc-c, var(--tc-ok)); }
.tc .tc-t__mk--ok { width: 16px; height: 16px; border-radius: 50%; font-size: 10px; font-weight: 800; color: #fff; background: var(--tc-ok); }
.tc--single .tc-t.is-cur { border-color: var(--tc-acc); border-left-color: var(--tc-c, var(--tc-acc)); }
.tc .tc-t__mk--cur { width: 9px; height: 9px; margin: 0 2px; border-radius: 50%; background: var(--tc-acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc-acc) 22%, transparent); }

/* ── «Έτοιμοι συνδυασμοί» ── */
.tc .tc-combos { border-top: 1px dashed var(--tc-line); padding-top: 8px; }
.tc .tc-combos__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc .tc-combos__tg {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; max-width: 100%;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--tc-ink); text-align: left;
  background: none; border: 1px solid transparent; border-radius: 10px; padding: 6px 10px 6px 6px; cursor: pointer;
}
.tc .tc-combos__tg:hover { background: var(--tc-hover); }
.tc .tc-combos__tg:focus-visible { outline: 2px solid var(--tc-acc); outline-offset: 2px; }
.tc .tc-combos__car { display: inline-block; width: 12px; color: var(--tc-mut); transition: transform .15s; }
.tc .tc-combos.is-open .tc-combos__car { transform: rotate(90deg); }
.tc .tc-combos__n { color: var(--tc-mut); font-weight: 600; }
.tc .tc-combos__note { color: var(--tc-ok-ink, var(--tc-ok)); font-weight: 700; }
.tc .tc-extra {
  width: 100%; margin: 0 0 4px; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 38px; padding: 6px 12px; font: inherit; text-align: left; cursor: pointer;
  color: var(--tc-ink); background: none; border: 1px dashed var(--tc-line); border-radius: 10px;
}
.tc .tc-extra:hover { border-color: var(--tc-acc); background: var(--tc-hover); }
/* το χρυσό του παιχνιδιού σκέτο είναι 4.4:1 σε 13px — λίγο μελάνι το περνά */
.tc .tc-extra__t { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--tc-acc) 82%, var(--tc-ink)); }
.tc .tc-extra__h { font-size: 11.5px; color: var(--tc-mut); }
.tc .tc-combos__body { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.tc .tc-cgrp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tc .tc-cgrp__hd { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.tc .tc-cgrp__t { flex: 0 1 auto; min-width: 0; font-family: var(--tc-font-h); font-weight: 700; font-size: 13.5px; color: var(--tc-ink); }
.tc .tc-cgrp__n { margin-right: auto; font-size: 11.5px; font-weight: 700; color: var(--tc-mut); }
/* ο αριθμός ΔΙΠΛΑ στο όνομα της έγκλισης («Οριστική 8»)· το «Όλα» του
   επιλογέα μένει δεξιά. Με flex:1 στο όνομα, στο πλέγμα του παιχνιδιού και
   στην οθόνη επιπέδων (χωρίς «Όλα») το «8» πήγαινε ~1150px πιο πέρα. */
.tc .tc-cgrp__rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@container (min-width: 780px) { .tc .tc-cgrp__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Στενό δοχείο: το «Προσαρμοσμένο» (πρώτο στο DOM, tense-cards.js) ΠΑΝΩ από
   το «Έτοιμοι συνδυασμοί», σε όλο το πλάτος, ώστε το πτυσσόμενο να μένει
   ακριβώς πάνω από τις γραμμές που ανοίγει — και η σειρά του Tab ίδια με
   του ματιού. Φαρδύ δοχείο: μία γραμμή, το «Προσαρμοσμένο» δεξιά. */
@container (min-width: 521px) { .tc .tc-extra { order: 1; width: auto; margin: 0 0 0 auto; } .tc .tc-extra ~ .tc-extra { margin-left: 0; } }
/* extras κλειδωμένο (ειδικό επίπεδο παιχνιδιού): 🔒, θαμπό — το κλικ δείχνει τη σημείωση */
.tc .tc-extra.is-lock { opacity: .62; }
.tc .tc-extra.is-lock:hover { border-color: var(--tc-line); opacity: .82; }
.tc .tc-extra .tc-t__mk--lock { margin-right: 2px; }
@media (prefers-reduced-motion: reduce) { .tc .tc-t, .tc .tc-card, .tc .tc-combos__car, .tc .tc-crow { transition: none; } }

/* ── mountMulti (μενού πολλαπλής επιλογής μέσα σε παιχνίδι) ──
   Μπάρα κεφαλής: μετρητής «3/12 χρόνοι + 1 συνδυασμός» και «Όλοι οι χρόνοι».
   «Όλα / Κανένα» ανά κάρτα· οι συνδυασμοί ως γραμμές επιλογής (.tc-crow). */
.tc .tc-mm__hd { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-height: 34px; }
.tc .tc-mm__n {
  font-size: 12.5px; font-weight: 700; color: var(--tc-mut); font-variant-numeric: tabular-nums;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--tc-line); background: var(--tc-btn);
}
.tc .tc-mm__n.is-on { color: var(--tc-ok-ink, var(--tc-ok)); border-color: color-mix(in srgb, var(--tc-ok) 55%, var(--tc-line)); }
.tc .tc-mm__all, .tc .tc-mm__pill {
  font: inherit; font-weight: 700; cursor: pointer; color: var(--tc-ink); background: var(--tc-btn);
  border: 1.5px solid var(--tc-line); border-radius: 999px; line-height: 1.1;
}
.tc .tc-mm__all { margin-left: auto; min-height: 34px; padding: 5px 14px; font-size: 13px; }
.tc .tc-mm__pill { flex: none; min-height: 30px; padding: 3px 11px; font-size: 12.5px; }
.tc .tc-mm__all:hover, .tc .tc-mm__pill:hover { background: var(--tc-hover); }
.tc .tc-mm__all.is-on, .tc .tc-mm__pill.is-on { color: var(--tc-ok-ink, var(--tc-ink)); border-color: var(--tc-ok); background: color-mix(in srgb, var(--tc-ok) 10%, var(--tc-btn)); }
.tc .tc-mm__all:focus-visible, .tc .tc-mm__pill:focus-visible { outline: 2px solid var(--tc-acc); outline-offset: 2px; }
.tc .tc-mm__lock { flex: none; font-size: 12px; opacity: .7; }
.tc .tc-crow {
  position: relative; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; margin: 0;
  padding: 6px 10px 6px 9px; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.25; text-align: left;
  color: var(--tc-ink); background: var(--tc-btn); cursor: pointer;
  border: 1.5px solid var(--tc-line); border-left: 3px solid var(--tc-c, var(--tc-line)); border-radius: 10px;
  transition: background .12s, border-color .12s;
}
.tc .tc-crow:hover { background: var(--tc-hover); border-left-color: var(--tc-c, var(--tc-line)); }
.tc .tc-crow:focus-visible { outline: 2px solid var(--tc-acc); outline-offset: 2px; }
.tc .tc-crow__box {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  font-size: 11px; font-weight: 800; color: #fff; border: 1.5px solid var(--tc-line);
}
.tc .tc-crow__t { min-width: 0; overflow-wrap: anywhere; }
/* η πρόοδος ενός συνδυασμού («✓ 9 πτ.» · «5 πτ.»), δεξιά — όπως η παλιά λίστα */
.tc .tc-crow__s {
  flex: none; margin-left: auto; padding-left: 6px; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--tc-mut); font-variant-numeric: tabular-nums;
}
.tc .tc-crow__s.is-done { color: var(--tc-ok-ink, var(--tc-ok)); }
.tc .tc-crow.is-on { background: color-mix(in srgb, var(--tc-ok) 11%, var(--tc-btn)); border-color: var(--tc-ok); border-left-color: var(--tc-c, var(--tc-ok)); }
.tc .tc-crow.is-on .tc-crow__box { background: var(--tc-ok); border-color: var(--tc-ok); }
.tc .tc-crow.is-lock { opacity: .62; border-left-color: var(--tc-line); }
.tc .tc-crow.is-lock .tc-crow__box { border: 0; color: inherit; font-size: 12px; }

/* ── ΤΟ ΠΑΙΧΝΙΔΙ ΔΙΑΒΑΖΕΙ .lvl-card, Η ΟΨΗ ΜΕΝΕΙ ΤΗΣ ΚΑΡΤΑΣ ──
   Ο πολλαπλός επιλογέας (gramBuildSubPicker, games/shared-engine.js) βάζει σε
   κάθε κουμπί χρόνου / γραμμή συνδυασμού και .lvl-card + data-lvl-id + την
   κλάση επιλογής του παιχνιδιού, ώστε ο αναγνώστης του (π.χ.
   «#latv-level-grid .lvl-card.latv-sel») να δουλεύει όπως πριν. Το .lvl-card
   όμως έχει στυλ λωρίδας (games/lyo/game.css: min-width 130px, max-width
   210px, flex-shrink 0, ανασήκωμα στο hover) — εδώ ακυρώνεται ΜΟΝΟ μέσα στις
   κάρτες. Το σήμα προόδου (.lvl-badge) που κρεμούν κάποια παιχνίδια στο
   .lvl-card δεν χωρά σε κουμπί χρόνου: η κάρτα δείχνει ήδη το ✓. */
.tc .tc-t.lvl-card, .tc .tc-crow.lvl-card { min-width: 0; max-width: none; flex-shrink: 1; transform: none; box-shadow: none; }
.tc .tc-t.lvl-card:hover, .tc .tc-crow.lvl-card:hover { transform: none; box-shadow: none; }
.tc .lvl-card > .lvl-badge { display: none; }

/* ═══ ΧΡΩΜΑΤΑ ΑΝΑ ΕΠΙΦΑΝΕΙΑ ════════════════════════════════════════════ */

/* 1 · Επιλογέας ύλης (css/live-picker.css): ίδιο πράσινο «στη μείξη» με τις γραμμές */
.lp-lv .tc {
  --tc-ok: #2e9e4f;
  /* πράσινο ΚΕΙΜΕΝΟ: σε λευκό ≈ 5.3:1 (το σκέτο #2e9e4f: 3.4:1). Ανακατεμένο
     με το --fg του θέματος, ώστε στο σκοτεινό θέμα να ανοίγει αντί να σβήνει */
  --tc-ok-ink: color-mix(in srgb, #2e9e4f 68%, var(--fg, #2B241C));
  --tc-hover: var(--sink, #EFE8DA);
  --tc-mut: var(--fg-70, color-mix(in srgb, var(--muted, #8A7F70) 70%, var(--fg, #2B241C)));
  --tc-font-h: var(--sans, inherit);
}
.lp-lv .tc-card { background: var(--card, #fff); }
/* «Όλα / Κανένα» της κάρτας και «Όλα» των ομάδων συνδυασμών: μικρά. Το pill
   του επιλογέα (16px, απόσταση γραμμάτων .8px) ήταν ΜΕΓΑΛΥΤΕΡΟ από τον τίτλο
   της κάρτας και τραβούσε το μάτι από την έγκλιση· το «Όλα» των ομάδων ήταν 31px. */
.lp-lv .tc-card__hd .lp-pill, .lp-lv .tc-cgrp__hd .lp-pill { padding: 4px 11px; min-height: 32px; font-size: 13px; letter-spacing: 0; }
.lp-lv .tc-card__hd .lp-lvrow__lock { font-size: 12px; }
/* ο μετρητής «3/48 χρόνοι + 1 συνδυασμός»: γραμματοσειρά ΜΕ ελληνικά (η
   --disp δεν έχει, και το «χρόνοι» έπεφτε σε άλλη μέσα στο ίδιο pill) */
.lp-lv--cards .lp-lv__c { font-family: var(--sans, 'Alegreya Sans', sans-serif); font-weight: 700; }
.lp-lv--cards .lp-lv__c.on { color: #fff; background: #23803f; border-color: #23803f; }
.lp-lv .tc-cgrp__rows .lp-lvrow { margin: 0; }

/* 2 · Πλέγμα επιπέδων παιχνιδιού (games/lyo/game.css .gpx-pick) — και κάθε
   μενού πολλαπλής επιλογής μέσα σε παιχνίδι (SymTenseCards.mountMulti, .tc-mm),
   ακόμη κι έξω από .gpx-pick: ίδια χρώματα με το πλέγμα του παιχνιδιού */
.gpx-pick .tc, .game-overlay .tc.tc-mm, .gram-qs-page .tc.tc-mm {
  --tc-ink:  var(--gpx-cream, var(--gg-ink, #1E1810));
  /* το σκέτο --gpx-dim (#8C7F6B) είναι 3.6:1 σε μικρό κείμενο· ανακατεμένο με
     το μελάνι ≈ 6:1, και ανεβάζει την αντίθεση και στο σκοτεινό θέμα */
  --tc-mut:  color-mix(in srgb, var(--gpx-dim, var(--gg-dim, #8C7F6B)) 65%, var(--gpx-cream, var(--gg-ink, #1E1810)));
  --tc-line: var(--gpx-line, var(--gg-line, rgba(30,24,16,.13)));
  --tc-card: color-mix(in srgb, var(--gg-ink, #1E1810) 3%, var(--gg-card, #fff));
  --tc-btn:  var(--gg-card, #fff);
  --tc-hover: color-mix(in srgb, var(--gg-acc, #2E7BB5) 7%, var(--gg-card, #fff));
  --tc-acc:  var(--gpx-gold, var(--gg-acc, #2E7BB5));
  --tc-ok:   var(--ls-ok, var(--sage, #5B7544));
  --tc-font-h: var(--ls-font-display, 'Alegreya', 'Cinzel', serif);
}
.gpx-pick--cards { display: flex; flex-direction: column; min-height: 0; }
.gpx-pick--cards .gpx-tcwrap { min-width: 0; }
/* στην κάρτα πλήρους ύψους του παιχνιδιού (desktop) κυλά μόνο η περιοχή των καρτών */
.lcard.lscreen-levels > .gpx-pick--cards .gpx-tcwrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 6px 8px 6px; }
/* 6px αριστερά: ο δακτύλιος εστίασης (2px + 2px απόσταση) του «Έτοιμοι
   συνδυασμοί» και των γραμμών συνδυασμών στο αριστερό άκρο κοβόταν ίσια με 2px */
@media (max-width: 900px) {
  .lcard.lscreen-levels > .gpx-pick--cards .gpx-tcwrap { overflow: visible; flex: 0 0 auto; }
}
/* «Όλα σε μία οθόνη» και στο laptop: η κεφαλή του παιχνιδιού (τίτλος,
   υπότιτλος, «Μοιράσου», διαχωριστικό, πρόοδος) έτρωγε ~260px της κάρτας
   σταθερού ύψους — στα 1366×657 φαινόταν ολόκληρη μόνο η πρώτη σειρά
   καρτών. Μόνο με κάρτες (λύω) και μόνο εκεί που η κάρτα έχει σταθερό
   ύψος (> 900px)· κάθε άλλο παιχνίδι μένει ίδιο. */
@media (min-width: 901px) {
  .lcard.lscreen-levels:has(> .gpx-pick--cards) { padding-top: clamp(14px, 1.5vw, 22px); padding-bottom: clamp(12px, 1.3vw, 20px); }
  .lcard.lscreen-levels:has(> .gpx-pick--cards) > h1 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.15; margin: 0 0 2px; }
  .lcard.lscreen-levels:has(> .gpx-pick--cards) > .lsubtitle { font-size: .95rem; margin: 0 0 8px; }
  .lcard.lscreen-levels:has(> .gpx-pick--cards) > .game-share-btn { margin-bottom: 0; padding-top: 7px; padding-bottom: 7px; }
  .lcard.lscreen-levels:has(> .gpx-pick--cards) > .ldivider { margin: 10px 0; }
  .lcard.lscreen-levels > .gpx-pick--cards > .gpx-prog { margin-bottom: 8px; }
}
/* …και σε χαμηλό laptop (1280×720 · 1366×657 · 1024×700) ούτε αυτό αρκούσε:
   η 2η σειρά καρτών κοβόταν και τα «Έτοιμοι συνδυασμοί» / «Προσαρμοσμένο»
   έμεναν κάτω από την άκρη της κύλισης, χωρίς ένδειξη ότι υπάρχουν. Εδώ
   φεύγει ο υπότιτλος και σφίγγουν τα κενά· τα κουμπιά μένουν ≥ 32px. */
@media (min-width: 901px) and (max-height: 800px) {
  /* και η κάρτα του παιχνιδιού λιγότερο αέρα (20/18 → 12/10px): στα 1366×657,
     με πρόοδο («✓ Ενεστ. 40» φαρδαίνει την Οριστική), έλειπαν ακόμη 10px */
  .lcard.lscreen-levels:has(> .gpx-pick--cards) { padding-top: 12px; padding-bottom: 10px; }
  .gpx-pick--cards .tc { gap: 8px; }
  .lcard.lscreen-levels:has(> .gpx-pick--cards) > .lsubtitle { display: none; }
  .lcard.lscreen-levels:has(> .gpx-pick--cards) > .ldivider { margin: 6px 0; }
  .gpx-pick--cards .tc .tc-grid { gap: 8px; }
  .gpx-pick--cards .tc .tc-card { padding: 6px 12px 8px; }
  .gpx-pick--cards .tc .tc-card__hd { min-height: 24px; }
  .gpx-pick--cards .tc .tc-voice { margin-top: 2px; gap: 4px; }
  .gpx-pick--cards .tc .tc-tenses { gap: 5px; }
  .gpx-pick--cards .tc .tc-tenses[data-flow] > .tc-br ~ .tc-t { margin-top: 5px; }
  .gpx-pick--cards .tc .tc-t { min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
  .gpx-pick--cards .tc .tc-combos { padding-top: 4px; }
}
.gpx-pick--cards .gpx-shut-note { margin: 0 0 10px; padding: 10px 14px; }
.gpx-pick .tc-cgrp__rows .gpx-row { margin: 0; }

/* 3 · Οθόνη επιπέδων (css/level-select.css) */
.ls-root .tc {
  --tc-ink:  var(--ls-ink, var(--fg, #2B241C));
  --tc-mut:  var(--ls-mut-2, var(--muted, #8A7F70));
  --tc-line: var(--ls-line-soft, var(--line, #E4DACB));
  --tc-card: var(--ls-surface, var(--card, #fff));
  --tc-btn:  var(--ls-surface-2, var(--card, #fff));
  --tc-hover: var(--ls-sink, var(--sink, #EFE8DA));
  --tc-acc:  var(--ls-accent, var(--ca, #2E7BB5));
  --tc-ok:   var(--ls-ok, var(--sage, #5B7544));
  --tc-font-h: var(--ls-font-display, inherit);
}
.ls-panel--cards { margin-top: 22px; min-width: 0; }
/* μπάρα «Ξεκίνα» με κάρτες: «Αόριστος · Ενεργητική» — αν δεν χωρά, δεύτερη
   γραμμή αντί για «…» πάνω στον χρόνο */
.ls-goslot--cards .ls-gobar__m b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Η κολλητή μπάρα «Ξεκίνα» (64px + 10px από κάτω) κρύβει ό,τι φέρνει στο
   μάτι το scrollIntoView ή το Tab: η σημείωση «Απαιτείται συνδρομή» κάτω από
   μια φωνή στο κάτω μέρος της οθόνης φαινόταν 30 από τα 53px της, και τα
   κουμπιά της τελευταίας σειράς έπεφταν ΠΙΣΩ από τη μπάρα (WCAG 2.4.11).
   Το scroll-padding το σέβονται και τα δύο. */
html:has(.ls-goslot--cards .ls-gobar) { scroll-padding-bottom: 96px; }
.ls-panel--cards .tc-cgrp__rows .ls-lv { min-height: 56px; }
.ls-locknote {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  color: var(--ls-ink, var(--fg)); background: var(--ls-sink, var(--sink, #EFE8DA));
  border: 1px solid var(--ls-line, var(--line, #E4DACB));
}