/*
 * goloth.v1.css — 30/10/2026 (demande d'Alain) : cases du Goloth dans l'esprit de l'ancien jeu.
 * Tuiles bombées et brillantes, liseré lumineux de la couleur de la case, étoiles = précision et coût de l'indice
 * (vert ★ 20 pts, bleu ★★ 40 pts, jaune ★★★ 60 pts). Case d'indice ouverte : tuile noire et coche blanche. Se charge après play.v1.css et en remplace le rendu des cases.
 */
.gl-grid { gap: 0; padding: 0; border: 1px solid #3a3f4a; background: #5d6068; align-self: start; align-content: start; }
.gl-grid > * { border: 1px solid #44474f; }
.gl-cell {
  --top: #9ff59f; --mid: #2fbf2f; --low: #0b5e0b; --rim: #48e048; --ink: #062a06;
  position: relative; aspect-ratio: 1; min-height: 44px; margin: 0; padding: 0;
  border-radius: 0; background: #5d6068 !important; cursor: pointer; color: var(--ink);
  font: 400 clamp(11px, 2.6vw, 16px)/1 var(--f-num); letter-spacing: .06em;
  transition: filter .15s, transform .12s;
}
.gl-cell::after {           /* la tuile */
  content: ""; position: absolute; inset: 7%; border-radius: 22%;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, var(--mid) 0%, var(--low) 100%);
  border: 2px solid var(--rim);
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 0 6px var(--rim), inset 0 -3px 6px rgba(0,0,0,.35), inset 0 2px 1px var(--top);
}
.gl-cell::before {          /* les étoiles, au-dessus de la tuile */
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.gl-g { --top: #b6ffb0; --mid: #33c833; --low: #0a5c0a; --rim: #4dea4d; --ink: #052405; }
.gl-b { --top: #c9d6dc; --mid: #6f8f99; --low: #145a6e; --rim: #2f63a8; --ink: #04141c; }
.gl-y { --top: #fff2a8; --mid: #e8b52a; --low: #7a4300; --rim: #f2d23c; --ink: #2a1600; }
.gl-cell.gl-g:not([class*="is-"])::before { content: "★"; }
.gl-cell.gl-b:not([class*="is-"])::before { content: "★★"; }
.gl-cell.gl-y:not([class*="is-"])::before { content: "★★★"; }
.gl-cell:not([class*="is-"]) { font-size: 0; }                 /* le texte éventuel est porté par ::before */
.gl-cell:not([class*="is-"])::before { font-size: clamp(12px, 3.4vw, 19px); }
.gl-cell:hover:not(:disabled) { transform: none; filter: brightness(1.14) saturate(1.1); }
.gl-cell:active:not(:disabled)::after { inset: 9%; }
.gl-cell:focus-visible { outline: 2px solid var(--c-ivory); outline-offset: -3px; }
.gl-cell:disabled:not([class*="is-"]) { cursor: default; filter: saturate(.75) brightness(.85); }

/* Case ouverte : tuile enfoncée et sombre, liseré de sa couleur, symbole au centre */
.gl-cell[class*="is-"] { color: var(--c-ivory); font-size: clamp(16px, 3.4vw, 22px); }
.gl-cell[class*="is-"]::after {
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%), linear-gradient(180deg, #0b1230, #070b1f);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5);
}
.gl-cell[class*="is-"] { isolation: isolate; }
.gl-cell[class*="is-"]::after { z-index: -1; }
.gl-cell.is-clue { font-size: 0; }                  /* le « • » posé par le script est remplacé par la coche */
.gl-cell.is-clue::after {                           /* case utilisée : tuile noire brillante, liseré de sa couleur */
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 42%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #2a2d33 0%, #050608 100%);
  border: 2px solid color-mix(in srgb, var(--rim) 55%, #000);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 -3px 6px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.35);
}
.gl-cell.is-clue::before {
  content: "✔"; position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
  font: 700 clamp(18px, 4.6vw, 30px)/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.gl-cell.is-crystal { color: var(--c-shield); }
.gl-cell.is-crystal::after { border-color: var(--c-shield); box-shadow: inset 0 3px 8px rgba(0,0,0,.7), 0 0 8px var(--c-shield); }
.gl-cell.is-bomb { color: #ff6a5a; border-color: transparent !important; }
.gl-cell.is-bomb::after { border-color: #ff6a5a; background: radial-gradient(circle, #5a1010, #1a0505); box-shadow: 0 0 10px #ff6a5a; }
.gl-cell.is-hidden { opacity: .45; }

/* Indices ouverts : trois colonnes (étoiles | libellé | valeur), chaque ligne centrée verticalement */
/* Grille commune à toutes les lignes (subgrid) : la colonne des étoiles prend la largeur des étoiles affichées,
   le type d'indice se colle à gauche juste après ; sans subgrid, repli sur une colonne fixe étroite. */
#gl-clues { display: grid; grid-template-columns: max-content minmax(6.5rem, 8.5rem) minmax(0, 1fr); column-gap: 10px; }
#gl-clues li { grid-column: 1 / -1; grid-template-columns: 2.4em minmax(6.5rem, 8.5rem) minmax(0, 1fr); align-items: center; column-gap: 10px; }
@supports (grid-template-columns: subgrid) { #gl-clues li { grid-template-columns: subgrid; } }
#gl-clues li::before { font: 400 12px/1 var(--f-num); letter-spacing: .05em; white-space: nowrap; }
#gl-clues li.gl-g::before { content: "★"; color: #4dea4d; }
#gl-clues li.gl-b::before { content: "★★"; color: #6c9be0; }
#gl-clues li.gl-y::before { content: "★★★"; color: #f2d23c; }
#gl-clues .k { overflow-wrap: anywhere; }