/* Mundo Japão — estilos das ferramentas.
   Tudo prefixado com .mj- para não brigar com o tema.
   Cores vêm de variáveis: quando o tema definitivo chegar, muda-se só aqui. */

.mj {
  --mj-tinta:   #16202b;
  --mj-suave:   #5c6672;
  --mj-linha:   #d5d9de;
  --mj-fundo:   #ffffff;
  --mj-alt:     #f2f4f6;
  --mj-azul:    #1d4e9c;
  --mj-azul-cl: #e7edf7;
  --mj-ocre:    #a34b1b;
  --mj-ocre-cl: #f6eae2;

  --mj-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  color: var(--mj-tinta);
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  .mj {
    --mj-tinta:   #e7eaee;
    --mj-suave:   #98a2ae;
    --mj-linha:   #2c343e;
    --mj-fundo:   #1a2028;
    --mj-alt:     #222a34;
    --mj-azul:    #7faef0;
    --mj-azul-cl: #1b2a3f;
    --mj-ocre:    #e2915c;
    --mj-ocre-cl: #33241a;
  }
}

.mj *, .mj *::before, .mj *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- formulário */
.mj-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.mj-form input[type="text"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  font-size: 17px;
  border: 1px solid var(--mj-linha);
  border-radius: 4px;
  background: var(--mj-fundo);
  color: var(--mj-tinta);
}
.mj-form input[type="text"]:focus-visible {
  outline: 2px solid var(--mj-azul);
  outline-offset: 1px;
}
.mj-form button {
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 600;
  border: 0;
  border-radius: 4px;
  background: var(--mj-azul);
  color: #fff;
  cursor: pointer;
}
.mj-form button:hover { filter: brightness(1.08); }
.mj-form button:focus-visible { outline: 2px solid var(--mj-tinta); outline-offset: 2px; }

/* -------------------------------------------------------------------- herói */
.mj-heroi {
  border: 1px solid var(--mj-linha);
  border-radius: 6px;
  background: var(--mj-alt);
  padding: 28px 24px;
  text-align: center;
  margin: 0 0 26px;
}
.mj-kana {
  font-family: var(--mj-jp);
  font-size: clamp(38px, 9vw, 64px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  margin: 0;
  word-break: keep-all;
}
.mj-leitura { margin: 12px 0 0; color: var(--mj-suave); font-size: 15px; }
.mj-leitura b { color: var(--mj-tinta); font-weight: 600; }
.mj-audio {
  margin-top: 16px;
  padding: 9px 18px;
  font-size: 15px;
  border: 1px solid var(--mj-linha);
  border-radius: 4px;
  background: var(--mj-fundo);
  color: var(--mj-tinta);
  cursor: pointer;
}
.mj-audio[hidden] { display: none !important; }

/* ------------------------------------------------------------------ blocos */
.mj-bloco { margin: 0 0 30px; }
.mj-bloco > h2, .mj-bloco > h3 { margin: 0 0 12px; }
.mj-nota { color: var(--mj-suave); font-size: 15px; }

.mj-silabas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mj-silaba {
  border: 1px solid var(--mj-linha);
  border-radius: 4px;
  background: var(--mj-fundo);
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}
.mj-silaba .pt { display: block; font-size: 13px; color: var(--mj-suave); }
.mj-silaba .jp { display: block; font-family: var(--mj-jp); font-size: 24px; line-height: 1.2; }

.mj-vertical {
  font-family: var(--mj-jp);
  font-size: 30px;
  line-height: 1.35;
  writing-mode: vertical-rl;
  text-orientation: upright;
  border: 1px solid var(--mj-linha);
  border-radius: 4px;
  background: var(--mj-fundo);
  padding: 16px 10px;
  max-height: 420px;
}

.mj-tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.mj-tabela th, .mj-tabela td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--mj-linha);
  vertical-align: top;
}
.mj-tabela th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--mj-suave); }
.mj-tabela .jp { font-family: var(--mj-jp); font-size: 20px; }
.mj-rolagem { overflow-x: auto; }

.mj-aviso {
  border: 1px solid var(--mj-linha);
  border-left: 3px solid var(--mj-ocre);
  background: var(--mj-ocre-cl);
  border-radius: 4px;
  padding: 16px 18px;
  font-size: 15px;
}
.mj-aviso p:last-child { margin-bottom: 0; }

.mj-destaque {
  border: 1px solid var(--mj-linha);
  border-left: 3px solid var(--mj-azul);
  background: var(--mj-azul-cl);
  border-radius: 4px;
  padding: 16px 18px;
}
.mj-destaque p:last-child { margin-bottom: 0; }
.mj-destaque .jp { font-family: var(--mj-jp); font-size: 22px; font-weight: 600; }

.mj-nikkei .kanji {
  font-family: var(--mj-jp);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
}

/* --------------------------------------------------------------- listagens */
.mj-indice { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.mj-indice li { margin: 0; }
.mj-indice a {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid var(--mj-linha);
  border-radius: 4px;
  background: var(--mj-fundo);
  text-decoration: none;
  font-size: 15px;
}
.mj-indice a:hover { border-color: var(--mj-azul); }
.mj-indice a .jp { font-family: var(--mj-jp); color: var(--mj-suave); margin-left: 6px; font-size: 14px; }

.mj-letra { margin: 24px 0 10px; font-size: 14px; letter-spacing: .1em; color: var(--mj-suave); text-transform: uppercase; }

.mj-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.mj-cartao {
  border: 1px solid var(--mj-linha);
  border-radius: 6px;
  background: var(--mj-fundo);
  padding: 16px 18px;
}
.mj-cartao h3 { margin: 0 0 6px; font-size: 17px; }
.mj-cartao p { margin: 0; font-size: 14.5px; color: var(--mj-suave); }

@media (max-width: 480px) {
  .mj-kana { font-size: 34px; }
  .mj-vertical { font-size: 26px; }
}

/* ------------------------------------------------------------------ zodíaco */

.mj-form-data { align-items: flex-end; flex-wrap: wrap; }
.mj-form-data label { display: block; font-size: .9em; opacity: .75; margin-bottom: .25em; }
.mj-form-data input[type="date"] { font: inherit; padding: .55em .7em; }

.mj-resultado { margin-top: 1em; }
.mj-z-topo { font-size: 1.15em; margin: 0 0 .6em; }
.mj-z-topo .jp { font-size: 1.9em; vertical-align: -.15em; margin-right: .3em; }
.mj-z-topo .mj-nota { display: block; font-size: .8em; margin-top: .2em; }

.mj-aviso-inline {
	border-left: 3px solid currentColor;
	padding: .5em .9em;
	margin: .8em 0;
	opacity: .9;
	font-size: .95em;
}

.mj-z-tres th { text-align: left; white-space: nowrap; }

/* A lista de anos é longa: vira uma malha compacta em vez de uma coluna. */
.mj-anos {
	display: flex;
	flex-wrap: wrap;
	gap: .35em .55em;
	line-height: 1.9;
}
.mj-anos a {
	display: inline-block;
	padding: .1em .45em;
	border: 1px solid currentColor;
	border-radius: 3px;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	opacity: .85;
}
.mj-anos a:hover, .mj-anos a:focus { opacity: 1; }

.mj-destaque { border-left: 4px solid currentColor; padding-left: 1em; }
.mj-ressalva { font-size: .95em; opacity: .85; }
.mj-vizinhos { display: flex; gap: 1.2em; flex-wrap: wrap; }

/* ------------------------------------------------------------ livro de frases */

.mj-f-busca { margin: 0 0 26px; }
.mj-f-busca label {
	display: block;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mj-suave);
	margin: 0 0 6px;
}
.mj-f-busca input {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	font-size: 17px;
	border: 1px solid var(--mj-linha);
	border-radius: 5px;
	background: var(--mj-fundo);
}
.mj-f-busca input:focus { outline: 2px solid var(--mj-azul); outline-offset: 1px; }
.mj-f-busca .mj-nota { margin: 7px 0 0; }

.mj-frases td { vertical-align: top; }
.mj-frases td .mj-nota { display: block; margin: 4px 0 0; font-size: 14px; }
.mj-frases .mj-f-jp { white-space: nowrap; }
.mj-frases .mj-f-jp .jp { font-family: var(--mj-jp); font-size: 19px; }
.mj-frases .mj-f-ro { white-space: nowrap; color: var(--mj-suave); }
.mj-frases .mj-f-sec { font-size: 14px; }

/* A tabela de frases é a única com três colunas de larguras muito diferentes.
   Em tela estreita, deixar o navegador espremer a coluna do português produz
   uma palavra por linha; melhor dar largura mínima e rolar dentro da caixa,
   que é o que .mj-rolagem já faz. */
.mj-frases { min-width: 520px; }
.mj-frases td:first-child, .mj-frases th:first-child { min-width: 190px; }

@media (max-width: 620px) {
	.mj-frases .mj-f-jp .jp { font-size: 17px; }
	.mj-frases .mj-f-ro { font-size: 14px; }
}