/* ══════════════════════════════════════════════════════════════════════
   SHARED GAME-OVERLAY CHROME  (synthesis shell)

   Ver1 games inject their own dark inner UI but rely on a SHARED set of
   `.game-overlay` / `.overlay-*` container rules that lived in Ver1's
   css/main.css and were NOT carried into the synthesis shell. Without
   them every launched game rendered transparent, in-flow and unpositioned
   (z-index:auto, background:transparent) — i.e. the game launched but was
   invisible, with the alabaster home bleeding through.

   This file restores ONLY the overlay container chrome, self-contained
   (concrete dark values, no dependency on --dark-* tokens that the shell
   does not define). A game's own game.css still styles its inner content.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* fallbacks for any Ver1 game CSS that references these tokens */
  --dark-base:   #18100A;
  --dark-panel:  #201408;
  --dark-border: rgba(195,165,105,0.14);
}

.game-overlay {
  display: none;
  position: fixed;
  inset: 0;
  /* Full-screen takeover: sit ABOVE the persistent cookie bar (7500) and guide
     tips (8000) so a launched game isn't partly covered by them. Stays below the
     first-run onboarding gate (9000) and full-screen takeovers (9600). */
  z-index: 8500;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  /* Το φόντο: βλ. «ΤΟ ΦΟΝΤΟ ΤΟΥ ΠΑΙΧΝΙΔΙΟΥ» αμέσως παρακάτω. */
  --ov-bg:    var(--sym-bg, #18100A);
  --ov-glow:  color-mix(in srgb, var(--sym-terra, #C9A44A) 10%, transparent);
  --ov-shade: color-mix(in srgb, var(--sym-ink, #000) 9%, transparent);
  --ov-ink:   color-mix(in srgb, var(--sym-terra, #C9A44A) 45%, var(--sym-fg, #F0EBE0));
  --ov-motif: color-mix(in srgb, var(--ov-ink) 16%, transparent);
  background: var(--ov-bg);
  isolation: isolate;
}
.game-overlay.active { display: flex; animation: none; }
/* Λάμψη + σκίαση μόνο όπου υπάρχει color-mix(): σε παλιό φυλλομετρητή ένα
   άκυρο var() μέσα στο background θα το έκανε ΟΛΟ διάφανο — και η αρχική θα
   φαινόταν κάτω από το παιχνίδι. Εκεί μένει το σκέτο --ov-bg από πάνω. */
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
  .game-overlay {
    background:
      radial-gradient(110% 60% at 50% -6%, var(--ov-glow), transparent 72%),
      radial-gradient(140% 110% at 50% 45%, transparent 58%, var(--ov-shade)),
      var(--ov-bg);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ΤΟ ΦΟΝΤΟ ΤΟΥ ΠΑΙΧΝΙΔΙΟΥ — «τα σύμβολα του Συμποσίου»

   Πριν: ένα επίπεδο καφέ #18100A σε ΚΑΘΕ θέμα, γύρω από κάθε κάρτα (και
   γύρω από τη λευκή κάρτα του Cycladic). Τώρα, από κάτω προς τα πάνω:

   1. Το χρώμα της σελίδας του ενεργού θέματος (--sym-bg· τα --sym-* τα
      κληρονομεί από το <body>, js/app.js render), με μια απαλή λάμψη του
      τόνου του θέματος (--sym-terra) ψηλά και ελαφριά σκίαση στις γωνίες.
      Χωρίς θέμα (σελίδες demo) μένει το παλιό σκοτεινό #18100A.
   2. Ένα σταθερό μοτίβο με τα σύμβολα του SymposiON: το Σ του λογότυπου
      (οι γραμμές του js/app.js brandMark), η κύλικα του Συμποσίου (το σχήμα
      του js/sym-loaders.js), η γλαύκα της Αθηνάς, ο αμφορέας
      (images/bg-symbols/amphora-silhouette.svg), η λύρα, ο ιωνικός κίονας,
      το κλαδί δάφνης και ο μαίανδρος του υποσέλιδου, με λίγα αστεράκια.
      Οκτώ σύμβολα σε πλακίδιο 360×360, γραμμή ~1,6px· η δεύτερη σειρά
      μετατοπισμένη κατά μισό πλακίδιο (half-drop, πλακίδιο 360×720), ώστε
      τα ίδια σύμβολα να μη στοιχίζονται σε στήλες.

   ΠΩΣ ΑΚΟΛΟΥΘΕΙ ΤΟ ΘΕΜΑ. Ένα SVG σε data-URI δεν διαβάζει μεταβλητές CSS,
   άρα το SVG δεν ζωγραφίζει τίποτα: είναι MASK. Τα σχήματα ανοίγουν
   «παράθυρα» σε ένα στρώμα με χρώμα --ov-motif: το --ov-ink (τόνος 45% +
   κείμενο του θέματος) σε 22% στα φωτεινά θέματα και 14% στα σκοτεινά
   (light-dark(), από το color-scheme που δηλώνει κάθε θέμα· 16% όπου δεν
   υποστηρίζεται). Ο ιδιοκτήτης ζήτησε τα σχέδια να φαίνονται σε όλα τα
   θέματα όσο στο Halloween· στα φωτεινά με 8% χάνονταν. Σκούρο σε φωτεινό,
   ανοιχτό σε σκοτεινό, πάντα στην απόχρωση του θέματος — ένα αρχείο για
   όλα τα θέματα. Προς το κέντρο (όπου κάθεται η κάρτα ή η λίστα ύλης) η
   ένταση πέφτει λίγο κάτω από το μισό:
   τα σύμβολα ζουν στα περιθώρια και δεν «βγαίνουν» μέσα από ημιδιάφανες
   γραμμές (π.χ. τα κλειδωμένα επίπεδα του επιλογέα ύλης).

   ΠΟΥ ΖΩΓΡΑΦΙΖΕΤΑΙ. Ψευδοστοιχείο με z-index:-1 μέσα στο stacking context
   του overlay (position:fixed + z-index + isolation): πάνω από το φόντο του
   overlay — και πάνω από όποιο φόντο βάζει ένα παιχνίδι στο δικό του
   overlay — αλλά ΚΑΤΩ από ΚΑΘΕ παιδί του (μπάρα, πλαίσιο που κυλά, κολλητές
   μπάρες, canvas). Δεν αλλάζει θέση/z-index κανενός παιδιού, δεν κυλά μαζί
   με το περιεχόμενο, δεν κινείται, δεν έχει JS. Η αντίθεση του κειμένου δεν
   αλλάζει: κάθε κείμενο κάθεται πάνω στη δική του κάρτα ή στο --sym-bg, για
   το οποίο είναι ήδη φτιαγμένα τα χρώματα του θέματος.

   ΑΝΑ ΠΑΙΧΝΙΔΙ (στο δικό του CSS, πάνω στο overlay του):
     --ov-bg     η βάση (π.χ. σταθερά σκοτεινή για παιχνίδι με σταθερή
                 σκοτεινή παλέτα — games/tow/tow.css)
     --ov-motif  το χρώμα των συμβόλων, ΜΑΖΙ με τη διαφάνειά του
     --ov-glow / --ov-shade   η λάμψη πάνω / η σκίαση στις γωνίες
   ══════════════════════════════════════════════════════════════════════ */
@supports (color: light-dark(#000, #fff)) {
  .game-overlay {
    --ov-motif: light-dark(color-mix(in srgb, var(--ov-ink) 22%, transparent),
                           color-mix(in srgb, var(--ov-ink) 14%, transparent));
  }
}
.game-overlay::before {
  --ov-symbols: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='720' viewBox='0 0 360 720' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg id='t'%3E%3Cg transform='translate(24 30) rotate(-8 30 30)'%3E%3Cpath d='M13 12H47M13 12L29 30L13 48H47' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3Ccircle cx='38.4' cy='30' r='7.2' stroke-width='1.9' stroke-dasharray='37.2 7.2' stroke-dashoffset='-4.2' transform='rotate(-90 38.4 30)'/%3E%3Cpath d='M38.4 23.4V29.4' stroke-width='1.9'/%3E%3C/g%3E%3Cg transform='translate(168 22) rotate(6 32 16)'%3E%3Cpath d='M7 4Q7 24 32 24Q57 24 57 4ZM7 6Q0 6 0 12Q0 18 6 18.5M57 6Q64 6 64 12Q64 18 58 18.5M30 24V33M34 24V33M24 35H40'/%3E%3Cpath d='M14 9Q32 14 50 9' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(296 96)'%3E%3Cpath d='M6 18Q6 48 20 48Q34 48 34 18Q34 6 20 6Q6 6 6 18ZM9 11L7 2L14 7M31 11L33 2L26 7M18.5 23L20 27L21.5 23M10 30Q13 41 20 45M30 30Q27 41 20 45M16 48V52M24 48V52'/%3E%3Ccircle cx='14.5' cy='17' r='4.6'/%3E%3Ccircle cx='25.5' cy='17' r='4.6'/%3E%3Ccircle cx='14.5' cy='17' r='1.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='25.5' cy='17' r='1.3' fill='%23000' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(108 126) rotate(10 24 34) scale(.4) translate(-30 -16)' stroke-width='4'%3E%3Cpath d='M48 24L72 24L70 40Q90 52 90 88Q90 130 60 150Q30 130 30 88Q30 52 50 40ZM50 40Q36 36 32 24Q30 16 40 18M70 40Q84 36 88 24Q90 16 80 18M44 24H76M60 150V172'/%3E%3Cellipse cx='60' cy='176' rx='14' ry='4'/%3E%3Cpath d='M38 78Q60 84 82 78M36 96Q60 102 84 96' stroke-opacity='.55'/%3E%3C/g%3E%3Cg transform='translate(226 184) rotate(-6 22 30)'%3E%3Cpath d='M13 45C3 38 4 23 10 13S9 4 4 2M31 45C41 38 40 23 34 13S35 4 40 2M7 10H37M18 10V47M22 10V47M26 10V47M16 52H28'/%3E%3Cellipse cx='22' cy='50' rx='12' ry='8'/%3E%3C/g%3E%3Cg transform='translate(22 218)'%3E%3Cpath d='M2 6H38M4 10H36M10 18V60M30 18V60M16 19V59M20 19V59M24 19V59M7 60H33M5 64H35M3 68H37'/%3E%3Ccircle cx='8' cy='14' r='3.6'/%3E%3Ccircle cx='32' cy='14' r='3.6'/%3E%3C/g%3E%3Cg transform='translate(118 282) rotate(-14 32 14)'%3E%3Cpath d='M2 26Q30 22 62 4'/%3E%3Cpath d='M14 24.5Q17 17 24 16Q21 23 14 24.5ZM14 24.5Q20 29 27 27Q22 22 14 24.5ZM30 20Q33 12 40 11Q37 18 30 20ZM30 20Q37 24 43 21Q38 16 30 20ZM46 13Q49 5 56 4Q52 11 46 13ZM46 13Q52 17 58 13Q54 9 46 13Z'/%3E%3C/g%3E%3Cg transform='translate(276 292) scale(.62)' stroke-width='2.6' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M0 50L0 14L30 14L30 38L14 38L14 26L22 26L22 32M40 50L40 14L70 14L70 38L54 38L54 26L62 26L62 32M-4 54H80M-4 9H80'/%3E%3C/g%3E%3Cg fill='%23000' stroke='none'%3E%3Ccircle cx='112' cy='84' r='1.6'/%3E%3Ccircle cx='118' cy='84' r='1.6'/%3E%3Ccircle cx='115' cy='78.8' r='1.6'/%3E%3Ccircle cx='214' cy='126' r='1.6'/%3E%3Ccircle cx='220' cy='126' r='1.6'/%3E%3Ccircle cx='217' cy='120.8' r='1.6'/%3E%3Ccircle cx='96' cy='226' r='1.4'/%3E%3Ccircle cx='330' cy='36' r='1.4'/%3E%3Ccircle cx='252' cy='320' r='1.4'/%3E%3Ccircle cx='196' cy='248' r='1.4'/%3E%3Cpath d='M276 70L277.2 74.8L282 76L277.2 77.2L276 82L274.8 77.2L270 76L274.8 74.8Z'/%3E%3Cpath d='M78 312L79 316L83 317L79 318L78 322L77 318L73 317L77 316Z'/%3E%3Cpath d='M188 196L189 200L193 201L189 202L188 206L187 202L183 201L187 200Z'/%3E%3C/g%3E%3C/g%3E%3Cuse href='%23t' x='180' y='360'/%3E%3Cuse href='%23t' x='-180' y='360'/%3E%3C/svg%3E");
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--ov-motif) 45%, transparent), var(--ov-motif) 100%);
  -webkit-mask: var(--ov-symbols) 0 0 / 360px 720px repeat;
          mask: var(--ov-symbols) 0 0 / 360px 720px repeat;
}
/* Στο κινητό η κάρτα πιάνει σχεδόν όλο το πλάτος: λίγο μικρότερο πλακίδιο,
   ώστε στις λωρίδες γύρω της να χωρά ολόκληρο σύμβολο, όχι μισό. */
@media (max-width: 600px) {
  .game-overlay::before { -webkit-mask-size: 300px 600px; mask-size: 300px 600px; }
}
/* Υψηλή αντίθεση των Windows: μόνο τα χρώματα του συστήματος, κανένα μοτίβο. */
@media (forced-colors: active) {
  .game-overlay::before { display: none; }
}
/* Ο επιλογέας ύλης του Ἀγῶνα (js/screens.js, #pvp-content-chooser) φορά το
   .game-overlay, αλλά είναι ΔΙΑΦΑΝΗΣ κουρτίνα πάνω στη θολωμένη σελίδα, με
   μια κάρτα στη μέση — όχι φόντο παιχνιδιού. Εκεί τα σύμβολα θα αιωρούνταν
   πάνω στην αρχική. Χωρίς μοτίβο. */
#pvp-content-chooser::before { display: none; }

/* Theme-adaptive chrome: the bar follows the active synthesis theme via the
   --sym-* tokens (mirrored onto <body> in app.js render). The previous fixed
   dark values remain as fallbacks for any overlay shown before a theme is set. */
.overlay-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2rem;
  padding-top: max(4px, env(safe-area-inset-top));
  padding-left: max(2rem, calc(1rem + env(safe-area-inset-left)));
  padding-right: max(2rem, calc(1rem + env(safe-area-inset-right)));
  min-height: 52px;
  background: var(--sym-bg-panel, #201408);
  border-bottom: 1px solid var(--sym-hairline, rgba(195,165,105,0.14));
  flex-shrink: 0;
}

.overlay-nav-btns { display: flex; flex-direction: row; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── The ONE back/nav button style, shared by every overlay ──────────────
   Same silhouette as the shell's primary action (.sc-cta): pill, sans, 700,
   terracotta accent. Individual games must NOT restyle this — it is the app's
   navigation chrome, not per-exercise decoration. */
.overlay-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sym-font-sans, 'Alegreya Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
  color: var(--sym-terra-dk, #205C8C);
  cursor: pointer;
  background: color-mix(in srgb, var(--sym-terra, #2E7BB5) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--sym-terra, #2E7BB5) 34%, transparent);
  border-radius: 999px;
  padding: 9px 17px;
  min-height: 36px;
  transition: color 0.18s, border-color 0.18s, background 0.18s, transform 0.14s;
}
/* Hover ΜΟΝΟ όπου υπάρχει ποντίκι: στο iPad το :hover «κολλάει» μετά το
   άγγιγμα και το κουμπί μένει γεμάτο τερακότα μέχρι το επόμενο άγγιγμα αλλού. */
@media (hover: hover) {
  .overlay-back:hover {
    color: #fff;
    border-color: transparent;
    background: var(--sym-terra-dk, #205C8C);
    transform: translateY(-1px);
  }
}
.overlay-back:focus-visible {
  outline: 2px solid var(--sym-terra, #2E7BB5);
  outline-offset: 2px;
}
/* Secondary step ("back to level/text selection") — same pill, quieter fill. */
.overlay-levels-btn {
  color: var(--sym-fg-muted, #8C7F6B);
  background: transparent;
  border-color: color-mix(in srgb, var(--sym-fg, #1E1810) 16%, transparent);
}
.overlay-levels-btn:hover {
  color: #fff;
  background: var(--sym-terra-dk, #205C8C);
  border-color: transparent;
}

.overlay-title {
  font-family: var(--sym-font-serif, 'Cormorant Garamond', 'Alegreya', serif);
  font-size: 16px;
  font-weight: 400;
  color: var(--sym-gold, rgba(195,165,105,0.8));
}

.overlay-lang { display: flex; border: 1px solid var(--sym-hairline, rgba(255,255,255,0.1)); overflow: hidden; }
.overlay-lang button {
  font-size: 11px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--sym-fg-muted, #907A68);
  background: transparent;
  border: none;
  font-family: var(--sym-font-sans, 'Inter', 'Alegreya Sans', sans-serif);
  transition: all 0.15s;
  letter-spacing: 1px;
}
.overlay-lang button.active {
  background: color-mix(in srgb, var(--sym-fg, #fff) 8%, transparent);
  color: var(--sym-fg, #F6F2EB);
}

.overlay-frame { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* ── Mobile: keep the shared game-overlay top bar from cramping / overlapping.
   On a phone the back button(s) + title + lang/mode toggle were colliding
   because the title never shrank. Give the title the flexible middle slot and
   trim the horizontal padding so all three fit. ── */
@media (max-width: 600px) {
  .overlay-topbar {
    gap: 8px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  /* Two lines, not one ellipsis. MEASURED on a 390px phone with the
     Παθητικός overlay: the title box is 145px holding 361px of text, so
     `white-space:nowrap` showed «Παθητικός Μέλλοντας &…» — 40% of the
     title. The bar is already two rows tall there (the nav buttons stack
     at this breakpoint), so a two-line clamp costs no height at all and
     roughly doubles what the student can read. (F-007 follow-on) */
  .overlay-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
  }
  .overlay-back { padding: 8px 13px; min-height: 34px; font-size: 11.5px; }
  .overlay-nav-btns { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 5px; }
  .overlay-lang { flex: 0 0 auto; }
}

/* ── Αφή: στόχος ≥44px ΧΩΡΙΣ να ψηλώσει η μπάρα ──────────────────────────
   Το κουμπί είναι 36px (34px κάτω από 600px). 44px ύψος θα μεγάλωνε την
   μπάρα κάθε παιχνιδιού — και στο κινητό τα δύο κουμπιά είναι στοιβαγμένα,
   άρα +20px λιγότερο παιχνίδι. Μεγαλώνει μόνο η ΠΕΡΙΟΧΗ αφής (αόρατο
   ::after): 4px πάνω/κάτω = 44px. Στοιβαγμένα (gap 5px) απλώνονται προς τα
   ΕΞΩ και μόλις 2px προς το μεταξύ τους κενό, ώστε να μην επικαλύπτονται:
   41px το καθένα, 44px όταν υπάρχει μόνο ένα. */
@media (pointer: coarse) {
  .overlay-back { position: relative; }
  .overlay-back::after { content: ''; position: absolute; inset: -4px 0; }
}
@media (pointer: coarse) and (max-width: 600px) {
  .overlay-back::after { inset: -5px 0 -2px; }
  .overlay-back:last-child::after { inset: -2px 0 -5px; }
  .overlay-back:only-child::after { inset: -5px 0; }
}