@font-face {
  font-family: 'Gazhul';
  src: url('/gazhul/fonts/gazhul.ttf');
}
.gazhul {
  font-family: 'Gazhul';
  font-size: 0.6em;
}
.ipa {
  white-space: nowrap;
}


body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  padding: 18px;
}
.chart-wrap {
  max-width: 500px;
  /*margin: 0 auto;*/
}
svg {
  width: 100%;
  height: auto;
  display: block;
  }
.guide { stroke: #ccc; stroke-width: 1; }
.box { fill: none; stroke: #ccc; stroke-width: 1.5; }
.label { font-size: 10px; fill: #333; }
.vowel-group:hover>.vowel-circle,
.vowel-group:focus>.vowel-circle {
  fill: #e7f970;
  }
.vowel-circle {
  fill: #bbb;
}
.vowel {
  font-family: "Moraika", "Noto Sans", "DejaVu Sans", "Segoe UI Symbol", sans-serif;
  font-size: 14px;
  text-anchor: middle;
  dominant-baseline: middle;
  fill: #222;
}
.vowel-group {
  cursor: pointer;
  user-select: none;
}
.group1 {
  background: #acfa70;
}
.group2 {
  background: #31df8f;
  fill: #31df8f;
}
.group3 {
  background: #00bbaa;
  fill: #00bbaa;
}
.group4 {
  background: #0096ab;
}
.group5 {
  background: #0072a3;
  color: #ffffff;
}
.group6 {
  background: #264c85;
  color: #ffffff;
}
.group7 {
  background: #382956;
  color: #ffffff;
}
.group8 {
  background: #8c1376;
  color: #ffffff;
}
.group-invisible {
  visibility: hidden;
}
.consonant-button {
  width: 2em;
  height: 2em;
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
}
.letter-div {
  display: flex;
  direction: column;
  gap: 0.2em;
}


table {
  border-collapse: collapse;
  /*margin: auto;*/
}
.consonant-table th,
.consonant-table td {
  padding: 0.3em;
}
th, td {
  border: 1px solid #ccc;
  text-align: center;
  white-space: nowrap;
}
th {
  background-color: #f4f4f4;
}
td button {
  background: #eee;
  border: none;
  border-radius: 6px;
  padding: 0.4em 0.6em;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
td button:hover, td button:focus {
  background-color: #0b66ff;
  color: white;
  transform: scale(1.2);
  outline: none;
}

.allowed { background-color: #c4f4c4; } /* green */
.morpheme { background-color: #fff3b0; } /* yellow */
.disallowed { background-color: #f4c4c4; } /* red */