/* Drawn glyphs: their ink, glow and category colours */

/* ---- Drawn glyphs (from _assets/Glyphs) ----
   The drawings are near-black ink on transparent: recoloured to pale stone on the game's
   dark popups, kept as dark ink on the notebook's paper. */
.glyph-image {
  display: block;
  width: 80%;
  height: 80%;
  object-fit: contain;
  pointer-events: none;
  filter: invert(1) sepia(0.3) brightness(0.88);
}

/* Drawn glyphs stand on their own (like in Chants of Sennaar): the drawing uses the glyph's whole space */
.glyph.has-image .glyph-image {
  width: 100%;
  height: 100%;
}

/* Hover: a soft golden glow around the drawing */

.glyph.has-image:hover .glyph-image,
.glyph.has-image:focus-visible .glyph-image {
  filter: invert(1) sepia(0.3) brightness(0.88) drop-shadow(0 0 6px rgba(255, 214, 120, 0.85));
}

/* Gold ink: the player's own words, the glyph picked out in the sightings panel, a pressed glyph */
.dialogue-line.is-player .glyph.has-image .glyph-image,
.glyph.has-image.is-current .glyph-image,
.glyph.has-image.is-glowing .glyph-image {
  filter: brightness(0) invert(76%) sepia(45%) saturate(620%) hue-rotate(5deg) brightness(95%);
}



/* Category (reply popup): the ink itself takes the category's colour (an SVG tint, see
   buildCategoryTints); unsorted glyphs keep the plain pale ink */

.glyph.has-image[data-category] .glyph-image {
  filter: var(--cat-tint, invert(1) sepia(0.3) brightness(0.88));
}

.glyph.has-image[data-category]:hover .glyph-image {
  filter: var(--cat-tint, invert(1) sepia(0.3) brightness(0.88)) drop-shadow(0 0 6px rgba(255, 214, 120, 0.85));
}

/* On the notebook's paper: dark ink, a little fainter until the meaning is confirmed */
.notebook .glyph-image {
  filter: none;
  opacity: 0.72;
}


.notebook .glyph.has-image.is-confirmed-glyph .glyph-image {
  opacity: 1;
}

/* Placeholder words (glyphs not drawn yet): their states show on the word itself */
.glyph:not(.has-image):hover,
.glyph:not(.has-image):focus-visible {
  color: var(--sunlight);
  text-shadow: 0 0 8px rgba(255, 214, 120, 0.6);
}

/* Gold: the player's own words, the word picked out in the sightings panel, a pressed glyph */
.dialogue-line.is-player .glyph:not(.has-image),
.glyph:not(.has-image).is-current,
.glyph:not(.has-image).is-glowing {
  color: var(--sunlight);
}

/* Category (reply popup): the word takes the category's colour, lightened to read on the dark popup */
.glyph:not(.has-image)[data-category] {
  color: color-mix(in srgb, var(--cat-colour, var(--stone-light)) 60%, white);
}

/* On the notebook's paper: dark ink, a little fainter until the meaning is confirmed */
.notebook .glyph:not(.has-image) {
  color: var(--forest-darkest);
  opacity: 0.72;
}

.notebook .glyph:not(.has-image).is-confirmed-glyph {
  opacity: 1;
}

/* Glyphs placed in a group's slots count as known ink */
.group-slot .glyph-image {
  opacity: 0.9;
}

.notebook .glyph.has-image:hover .glyph-image {
  filter: drop-shadow(0 0 5px rgba(217, 182, 92, 0.9));
}

/* Carved into the stones: dark grooves with a faint light edge below */
.stone .glyph.has-image {
  width: 76px;
  height: 76px;
}

.item-row .stone .glyph.has-image {
  width: 50px;
  height: 50px;
}

/* (a soft pale halo around the strokes lifts them off the stone's texture) */
.stone .glyph-image,
.notebook .stone .glyph-image {
  width: 100%;
  height: 100%;
  opacity: 0.92;
  filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.45)) drop-shadow(0 0 4px rgba(255, 250, 235, 0.75));
}

.stone .glyph.has-image:hover .glyph-image {
  filter: drop-shadow(0 1.5px 0 rgba(255, 255, 255, 0.45)) drop-shadow(0 0 4px rgba(255, 250, 235, 0.75))
    drop-shadow(0 0 6px rgba(255, 214, 120, 0.9));
}