.glyph-controls {
  margin-bottom: 1rem;
  font-family: sans-serif;
}

.glyph-controls select {
  border: hidden;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  padding: 4px 8px;
  color: var(--colorshift);
}

.glyph-controls select:hover {
  cursor: pointer;
}

.glyph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

@media (max-width: 1200px) {
  .glyph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
}

/* Outer box — stays this exact size always, hover/no-hover.
   This is what the grid lays out and what pointer events target. */
.glyph {
  height: 140px;
  position: relative;
  overflow: visible;
}

/* Inner element — purely visual, ignores pointer events so it can
   never itself trigger hover. Everything animated lives here. */
.glyph-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 72px;
  line-height: 1;

  pointer-events: none;
}

@media (max-width: 1200px) {
  .glyph-inner {
    font-size: 36px;
  }
}

/* Hover is detected on the stable .glyph box, but the transform
   is applied to .glyph-inner — so the grid never reflows. */
.glyph:hover .glyph-inner {
  color: var(--colorshift);
  font-size: 50vh;

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 100vw;
  height: 100vh;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.08em 0.12em;

  z-index: -10;
}

.glyph-label {
  font-family: 'Times New Roman', Times, serif;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;

  text-align: center;
  font-size: 9px;
  line-height: 1.3;

  color: var(--colorshift);
  pointer-events: none;
}

.glyph-overview {
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--colorshift);
}