/* ΠΑΙΧΝΙΔΙΑ (κρεμάλα, sudoku, βρες τη λέξη, ναρκαλιευτής)
   1. .glaunch  — τα 4 κουμπιά στην αριστερή στήλη της αρχικής
   2. .gmodal   — το αναδυόμενο παράθυρο κάθε παιχνιδιού. Όταν κλείνει απλώς κρύβεται
                  (hidden), δεν αδειάζει: έτσι το παιχνίδι μένει όπως το άφησες.
   3. .gm-*     — κοινό «κέλυφος» των sudoku / λέξης / ναρκαλιευτή:
                  .gm-top 28+8px · .gm-board τετράγωνο · .gm-msg 24px · .gm-bottom 76px */

/* ---------- 1. Κουμπιά ---------- */
.glaunch { float: left; width: 100%; margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.glaunch-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    height: 100px; padding: 0; cursor: pointer;
    font-family: "Open Sans", Sans-Serif, serif; font-size: 15px; color: white;
    background: #5a4fcf; border: none; border-radius: 10px;
    transition: filter .15s, transform .15s;
}
/* Ένα χρώμα ανά παιχνίδι, από την παλέτα των καρτών της Τράπεζας Θεμάτων */
.glaunch-btn[data-game="kremala"] { background: #2f9488; }
.glaunch-btn[data-game="sudoku"]  { background: #5a4fcf; }
.glaunch-btn[data-game="lexi"]    { background: #c98200; }
.glaunch-btn[data-game="narkes"]  { background: #a5177d; }
.glaunch-btn:hover { filter: brightness(1.15); transform: translateY(-2px); }
.glaunch-btn svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.glaunch-btn span { pointer-events: none; }

/* ---------- 2. Αναδυόμενο παράθυρο ---------- */
/* z-index: πάνω από το fixed header (1000/1001), κάτω από το .toast (2000) */
.gmodal {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1500;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .65);
}
.gmodal[hidden] { display: none; }
.gmodal-box {
    max-height: 96vh; overflow-y: auto; padding: 8px 16px 16px 16px;
    background: #333333; border: 1px solid #6667ab; border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.gmodal-head { display: flex; justify-content: space-between; align-items: center; height: 36px; font-size: 18px; color: white; }
.gmodal-x { font-size: 26px; line-height: 1; padding: 0 4px; background: none; border: none; color: #d6d4e0; cursor: pointer; }
.gmodal-x:hover { color: white; }

/* Πλάτος παραθύρου. Το πλέγμα είναι τετράγωνο, οπότε το πλάτος ορίζει και το ύψος:
   το calc με το 100vh κρατά ολόκληρο το παιχνίδι μέσα σε χαμηλές οθόνες. */
.gmodal-narrow .gmodal-box { width: min(420px, calc(100vh - 270px), 90vw); }
/* φαρδύ (βρες τη λέξη): το πλέγμα πιάνει το 72.97% του πλάτους, το υπόλοιπο η πλαϊνή στήλη */
.gmodal-wide .gmodal-box { width: min(576px, calc((100vh - 310px) / 0.7297), 90vw); }
.gmodal-kremala .gmodal-box { width: min(540px, 90vw); min-height: 220px; }

/* Ο τίτλος φαίνεται στην κεφαλίδα του παραθύρου, όχι και μέσα στο παιχνίδι */
.gmodal .gm-title { display: none; }
.gmodal .gm-top { justify-content: flex-end; }

/* ---------- 3. Κοινό κέλυφος ---------- */
.gm { width: 100%; font-family: "Open Sans", Sans-Serif, serif; outline: none; user-select: none; -webkit-user-select: none; }

.gm-top { display: flex; justify-content: space-between; align-items: center; height: 28px; margin-bottom: 8px; }
.gm-title { font-size: 18px; color: white; }
.gm-pills { display: flex; gap: 4px; }
.gm-pill {
    font: inherit; font-size: 13px; color: #d6d4e0; background: transparent;
    border: 1px solid #6667ab; border-radius: 12px; padding: 2px 9px; cursor: pointer;
}
.gm-pill:hover { background: #4a4b7c; color: white; }
.gm-pill.gm-on { background: #6667ab; color: white; }

.gm-main { display: flex; justify-content: center; }
.gm-board {
    flex: none; width: 100%; aspect-ratio: 1; box-sizing: border-box;
    background: #622569; border: 3px solid #622569; border-radius: 6px;
    container-type: inline-size;
}
.gm-msg { height: 24px; line-height: 24px; text-align: center; font-size: 15px; color: #ffd27a; overflow: hidden; }
.gm-bottom { height: 76px; box-sizing: border-box; overflow: hidden; }

/* Φαρδιά εκδοχή: τετράγωνο πλέγμα αριστερά και πλαϊνή στήλη δεξιά του */
.gm-wide .gm-main { justify-content: flex-start; gap: 12px; }
.gm-wide .gm-board { width: 72.97%; }
.gm-side { flex: 1; min-width: 0; position: relative; }
.gm-side-in { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-y: auto; }

/* Κοινά πλήκτρα της κάτω ζώνης */
.gm-key {
    font: inherit; font-size: 20px; height: 36px; padding: 0;
    background: #d6d4e0; color: black; border: none; border-radius: 4px; cursor: pointer;
}
.gm-key:hover { background: white; }