:root {
  --bg:           #f7f8fa;        /* page background */
  --panel:        #ffffff;        /* cards, sidebar, squares background */
  --muted:        #6b7280;        /* secondary text, readings, count */
  --accent:       #0070ff;        /* main interactive color (hover, etc.) */
  --accent-strong:#005ad1;        /* active/pressed state */
  --line:         #e6e7ea;        /* borders, dividers */
  --highlight:    #fff8d2;        /* hover background for squares */

  /* Kana row border colors – feel free to change these */
  --a-gyou:       #ffaaaa;
  --ka-gyou:      #ffccaa;
  --sa-gyou:      #46ad27;
  --ta-gyou:      #b4e16f;
  --na-gyou:      #aaffaa;
  --ha-gyou:      #54e0e0;
  --ma-gyou:      #aaccff;
  --ya-gyou:      #ccaaff;
  --ra-gyou:      #ffaaee;
  --wa-gyou:      #dddddd;

  /* Active kana background & border – derived from row color or custom */
  --active-bg-a:  #ff6666;
  --active-bd-a:  #cc0000;
  --active-bg-ka: #ffaa66;
  --active-bd-ka: #cc7700;
  --active-bg-sa: #ffff66;
  --active-bd-sa: #aaaa00;
  --active-bg-ta: #aaff66;
  --active-bd-ta: #77aa00;
  --active-bg-na: #66ff66;
  --active-bd-na: #00aa00;
  --active-bg-ha: #66ffff;
  --active-bd-ha: #00aaaa;
  --active-bg-ma: #66aaff;
  --active-bd-ma: #0066cc;
  --active-bg-ya: #aa66ff;
  --active-bd-ya: #7700cc;
  --active-bg-ra: #ff66aa;
  --active-bd-ra: #cc0066;
  --active-bg-wa: #777777;
  --active-bd-wa: #444444;

  /* Show All button */
  --show-all-bg:  #444444;
  --show-all-bd:  #222222;
  --show-all-hover: #222222;
}

body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: #111;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #111;
}

#search {
  width: 100%;
  max-width: 500px;
  padding: 12px 16px;
  margin: 20px auto;
  display: block;
  font-size: 18px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

#search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 112, 255, 0.15);
}

#count {
  text-align: center;
  font-size: 16px;
  color: var(--muted);
  margin: 10px 0 20px;
}

.main {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--panel);
  border-radius: 10px;
  border: 1px solid var(--line);
  max-height: 85vh;
  overflow-y: auto;
  min-width: 260px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#show-all {
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  border-radius: 10px;
  background: var(--show-all-bg);
  color: white;
  border: 2px solid var(--show-all-bd);
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 8px;
  flex: none;
  transition: background 0.15s;
}

#show-all:hover {
  background: var(--show-all-hover);
}

.kana-row {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.kana {
  flex: 1;
  padding: 10px;
  font-size: 17px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  background: var(--panel);
  border: 2px solid var(--line);
  transition: all 0.18s ease;
  min-width: 0;
}

.kana:hover {
  background: var(--highlight);
  transform: translateY(-1px);
}

.kana.active {
  color: white;
  font-weight: bold;
  transform: scale(1.06);
}

/* Row-specific border colors */
.a-gyou  .kana { border-color: var(--a-gyou); }
.ka-gyou .kana { border-color: var(--ka-gyou); }
.sa-gyou .kana { border-color: var(--sa-gyou); }
.ta-gyou .kana { border-color: var(--ta-gyou); }
.na-gyou .kana { border-color: var(--na-gyou); }
.ha-gyou .kana { border-color: var(--ha-gyou); }
.ma-gyou .kana { border-color: var(--ma-gyou); }
.ya-gyou .kana { border-color: var(--ya-gyou); }
.ra-gyou .kana { border-color: var(--ra-gyou); }
.wa-gyou .kana { border-color: var(--wa-gyou); }

/* Active states */
.a-gyou  .kana.active { background: var(--active-bg-a);  border-color: var(--active-bd-a); }
.ka-gyou .kana.active { background: var(--active-bg-ka); border-color: var(--active-bd-ka); }
.sa-gyou .kana.active { background: var(--active-bg-sa); border-color: var(--active-bd-sa); }
.ta-gyou .kana.active { background: var(--active-bg-ta); border-color: var(--active-bd-ta); }
.na-gyou .kana.active { background: var(--active-bg-na); border-color: var(--active-bd-na); }
.ha-gyou .kana.active { background: var(--active-bg-ha); border-color: var(--active-bd-ha); }
.ma-gyou .kana.active { background: var(--active-bg-ma); border-color: var(--active-bd-ma); }
.ya-gyou .kana.active { background: var(--active-bg-ya); border-color: var(--active-bd-ya); }
.ra-gyou .kana.active { background: var(--active-bg-ra); border-color: var(--active-bd-ra); }
.wa-gyou .kana.active { background: var(--active-bg-wa); border-color: var(--active-bd-wa); }

.spacer {
  visibility: hidden;
  border: none !important;
  background: none !important;
  pointer-events: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  flex: 1;
  padding: 10px 0;
}

.square {
  aspect-ratio: 1 / 1;
  background: var(--panel);
  border: 2px solid #7579fe;   /* you can also make this a variable if you want */
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.square:hover {
  transform: scale(1.08);
  background: var(--highlight);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.reading {
  font-size: 14px;
  margin-top: 4px;
  color: var(--muted);
  text-align: center;
  line-height: 1.25;
  padding: 0 4px;
}