/* =========================================================
   SYMBOLS LOCK FILE — DO NOT MODIFY unless you intend to change
   the size/appearance of ALL symbols on the site.

   Why this exists:
   - Symbols are rendered as images (assets/icons/ptable/*.png)
   - Their on-screen size is controlled ONLY here.
   - Editing other pages shouldn't touch this file.
   ========================================================= */

:root{
  --kineo-symbol-size: 72px;   /* change only if you WANT bigger/smaller symbols */
  --kineo-symbol-radius: 22px; /* corner rounding of the symbol tile */
}

/* Image inside the symbol tile */
.glyph-img{
  width: var(--kineo-symbol-size) !important;
  height: var(--kineo-symbol-size) !important;
  object-fit: contain !important;
}

/* Tile that contains the symbol (keeps it visually centered) */
.glyph-box{
  width: calc(var(--kineo-symbol-size) + 36px) !important;
  height: calc(var(--kineo-symbol-size) + 36px) !important;
  border-radius: var(--kineo-symbol-radius) !important;
  display: grid !important;
  place-items: center !important;
}


/* =========================================================
   SHARP PNG RENDERING (Safari/Chrome)
   - Prevents "pixelated" look
   - Keeps icons crisp without blurry scaling
   ========================================================= */
.glyph-img{
  image-rendering: auto !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}