/* modules.css — Estilos dos módulos de jogo (M1 e M2) */

/* ─── Botões compartilhados ─────────────────────────── */
.nh-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:999px;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--bg);
  font-family:inherit;font-weight:600;font-size:15px;letter-spacing:-0.005em;
  cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .25s, background .2s;
  box-shadow:4px 4px 0 0 var(--ink);
}
.nh-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ink)}
.nh-btn:active{transform:translate(1px,1px);box-shadow:2px 2px 0 0 var(--ink)}
.nh-btn--primary{background:var(--vermillion);border-color:var(--vermillion);color:#fff}
.nh-btn--ghost{background:transparent;color:var(--ink);box-shadow:none}
.nh-btn--ghost:hover{background:var(--ink);color:var(--bg);box-shadow:4px 4px 0 0 var(--vermillion)}

.nh-muted{color:var(--muted)}

/* ─── Shake (resposta inválida) ─────────────────────── */
.nh-shake{animation:nhShake .4s}
@keyframes nhShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* ─── PromptHeader (cabeçalho da palavra-alvo) ─────── */
.nh-prompt{
  text-align:center;
  margin-bottom:28px;
}
.nh-prompt__label{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.nh-prompt__primary{
  font-family:var(--font-jp);
  font-weight:900;
  font-size:clamp(48px, 8vw, 84px);
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin-bottom:6px;
}
.nh-prompt__primary .display{
  font-family:var(--font-display);
  font-size:clamp(40px, 7vw, 72px);
  letter-spacing:-0.03em;
}
.nh-prompt__meaning{
  font-family:var(--font-display);
  font-style:italic;
  font-size:16px;
  color:var(--muted);
  margin-top:4px;
}

/* ─── Tile (componente compartilhado) ──────────────── */
.nh-tile{
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);
  border-radius:12px;
  background:var(--bg);
  font-weight:700;
  position:relative;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s;
}
.nh-tile--kana{font-family:var(--font-jp);font-size:34px}
.nh-tile--romaji{font-family:var(--font-mono);font-size:22px;font-weight:600;text-transform:lowercase}
.nh-tile--empty{background:transparent;border-color:var(--line);border-style:dashed}
.nh-tile--active{border-color:var(--vermillion);border-style:dashed;animation:nhPulse 1.4s ease-in-out infinite}
.nh-tile--flip{animation:nhFlip .55s cubic-bezier(.6,.05,.4,1) forwards}
@keyframes nhFlip{
  0%{transform:rotateX(0)}
  50%{transform:rotateX(90deg)}
  100%{transform:rotateX(0)}
}
@keyframes nhPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(233,75,60,0)}
  50%{box-shadow:0 0 0 4px rgba(233,75,60,0.18)}
}
.nh-tile--correct{background:var(--mint);color:#fff;border-color:var(--mint)}
.nh-tile--present{background:var(--ochre);color:var(--ink);border-color:var(--ochre)}
.nh-tile--absent{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Badge de romaji no canto sup. direito do tile (linhas enviadas do M1).
   Herda a cor do conteúdo do tile (currentColor) p/ contrastar em qualquer fundo. */
.nh-tile__badge{
  position:absolute;
  top:5px;right:7px;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:lowercase;
  color:currentColor;
  opacity:.55;
  pointer-events:none;
  animation:nhBadgeIn .3s ease both;
  animation-delay:.28s;
}
@keyframes nhBadgeIn{from{opacity:0}to{opacity:.55}}

/* ─── Slot M2 (elástico, dois andares) ─────────────── */
.nh-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px solid var(--ink);
  border-radius:12px;
  background:var(--bg);
  padding:6px 10px;
  position:relative;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s;
}
.nh-slot__kana{
  font-family:var(--font-jp);
  font-size:14px;
  font-weight:600;
  line-height:1;
  color:var(--muted);
  margin-bottom:4px;
  letter-spacing:-0.01em;
  transition:color .3s;
}
.nh-slot__romaji{
  font-family:var(--font-mono);
  font-size:18px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.02em;
  text-transform:lowercase;
  min-height:22px;
  transition:color .3s;
}
/* Badge de kana no canto (linhas enviadas do M2) — espelha o romaji-badge do M1.
   Herda a cor do conteúdo do slot p/ contrastar em qualquer fundo. */
.nh-slot__badge{
  position:absolute;
  top:5px;right:7px;
  font-family:var(--font-jp);
  font-size:12px;
  font-weight:600;
  line-height:1;
  color:currentColor;
  opacity:.6;
  pointer-events:none;
  animation:nhBadgeIn .3s ease both;
  animation-delay:.28s;
}
.nh-slot--ghost{
  background:transparent;
  border-color:var(--line);
  border-style:dashed;
}
.nh-slot--ghost .nh-slot__kana,
.nh-slot--ghost .nh-slot__romaji{color:transparent}
.nh-slot--active{
  border-color:var(--vermillion);
  border-style:dashed;
  animation:nhPulse 1.4s ease-in-out infinite;
}
/* Slot com romaji inexistente: pisca a borda vermelha e sacode (não envia). */
.nh-slot--invalid{
  border-style:solid !important;
  border-color:var(--vermillion) !important;
  box-shadow:0 0 0 3px rgba(233,75,60,.28);
  animation:nhSlotInvalid .5s ease both !important;
}
@keyframes nhSlotInvalid{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.nh-slot--locked{animation:nhFlip .55s cubic-bezier(.6,.05,.4,1) forwards}
.nh-slot--correct{background:var(--mint);color:#fff;border-color:var(--mint)}
.nh-slot--correct .nh-slot__kana{color:rgba(255,255,255,.75)}
.nh-slot--correct .nh-slot__romaji{color:#fff}
.nh-slot--present{background:var(--ochre);border-color:var(--ochre);color:var(--ink)}
.nh-slot--present .nh-slot__kana{color:rgba(22,22,29,.55)}
.nh-slot--present .nh-slot__romaji{color:var(--ink)}
.nh-slot--absent{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.nh-slot--absent .nh-slot__kana{color:rgba(251,246,236,.55)}
.nh-slot--absent .nh-slot__romaji{color:var(--bg)}

/* ─── Status row (texto abaixo da board) ───────────── */
.nh-m1__status, .nh-m2__status{
  margin:18px 0 22px;
  text-align:center;
  font-size:13px;
  letter-spacing:.04em;
  min-height:20px;
}
.nh-m1__status--strong, .nh-m2__status--strong{
  font-weight:700;
  color:var(--ink);
  font-size:14px;
}

/* ─── Teclado QWERTY (M2) ──────────────────────────── */
.nh-qwerty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  max-width:640px;margin:0 auto;
}
.nh-qwerty__row{
  display:flex;gap:6px;justify-content:center;
}
.nh-qwerty__actions{
  display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center;
}

/* ─── Teclado de kana (M1) ─────────────────────────── */
.nh-kana-kb{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:520px;margin:0 auto;
}
.nh-kana-kb__toggle{
  display:flex;gap:8px;margin-bottom:4px;
}
.nh-toggle{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:6px 12px;
  border:1.5px solid var(--ink);
  border-radius:999px;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:all .2s;
}
.nh-toggle--active{background:var(--ink);color:var(--bg)}
.nh-kana-kb__grid{
  display:flex;flex-direction:column;gap:6px;
}
.nh-kana-kb__row{
  display:flex;gap:6px;justify-content:center;
}
.nh-kana-kb__actions{
  display:flex;gap:8px;margin-top:8px;
}

/* ─── Keys (genérico) ──────────────────────────────── */
.nh-key{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:46px;padding:0 8px;
  border:1.5px solid var(--ink);
  border-radius:8px;
  background:var(--bg);
  color:var(--ink);
  font-weight:700;
  cursor:pointer;
  transition:transform .15s, background .2s, color .2s, opacity .2s;
  user-select:none;
}
.nh-key:hover:not(:disabled){background:var(--ink);color:var(--bg);transform:translateY(-2px)}
.nh-key:active:not(:disabled){transform:translateY(0)}
.nh-key:disabled{cursor:not-allowed}

.nh-key--letter{font-family:var(--font-mono);font-size:14px;text-transform:lowercase;min-width:36px;width:36px}
.nh-key--kana{font-family:var(--font-jp);font-size:18px;min-width:42px;width:42px}
.nh-key--spacer{visibility:hidden;border:none;background:transparent;cursor:default;width:42px}
.nh-key--action{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  padding:0 16px;
  min-width:auto;
  text-transform:lowercase;
}
.nh-key--space{min-width:200px}
.nh-key--enter{background:var(--vermillion);color:#fff;border-color:var(--vermillion)}
.nh-key--enter:hover:not(:disabled){background:var(--vermillion-deep);border-color:var(--vermillion-deep);color:#fff}

.nh-key--correct{background:var(--mint);color:#fff;border-color:var(--mint)}
.nh-key--correct:hover:not(:disabled){background:var(--mint);color:#fff;border-color:var(--mint);opacity:.85}
.nh-key--present{background:var(--ochre);color:var(--ink);border-color:var(--ochre)}
.nh-key--present:hover:not(:disabled){background:var(--ochre);color:var(--ink);border-color:var(--ochre);opacity:.85}
.nh-key--absent{background:var(--ink);color:var(--bg);border-color:var(--ink);opacity:.6}
.nh-key--absent:hover:not(:disabled){opacity:.5;transform:translateY(0)}

.nh-key--impossible{
  background:var(--bg-2);
  color:var(--muted);
  border-color:var(--muted);
  border-style:dashed;
  cursor:not-allowed;
  opacity:.85;
}
.nh-key--impossible:hover{background:var(--bg-2);color:var(--muted);transform:none}

/* ─── Próxima palavra ──────────────────────────────── */
.nh-m1__nextrow, .nh-m2__nextrow{
  display:flex;justify-content:center;margin-top:24px;
}

/* ─── Board wrappers ───────────────────────────────── */
.nh-m1, .nh-m2{
  display:flex;flex-direction:column;align-items:center;
  width:100%;
}
.nh-m1__board, .nh-m2__board{
  margin-bottom:8px;
}

/* ─── Responsivo ───────────────────────────────────── */
@media (max-width:720px){
  .nh-tile--kana{font-size:28px}
  .nh-tile--romaji{font-size:18px}
  .nh-slot__kana{font-size:12px}
  .nh-slot__romaji{font-size:16px}
  .nh-key--letter{min-width:30px;width:30px;height:42px;font-size:13px}
  .nh-key--kana{min-width:34px;width:34px;height:42px;font-size:15px;padding:0 2px}
  .nh-key--space{min-width:140px;font-size:10px}
  /* teclado horizontal de kana (10 colunas) precisa de gaps menores */
  .nh-kana-kb__row{gap:4px}
  .nh-kana-kb__grid{gap:4px}
}
@media (max-width:430px){
  .nh-key--kana{min-width:29px;width:29px;height:40px;font-size:14px}
  .nh-kana-kb__row{gap:3px}
  .nh-kana-kb__grid{gap:3px}
}