/* ============================= */
/*   DOJO TRADICIONAL — SISTEMA  */
/* ============================= */
:root {
  --washi: #f3ecdd;
  --sumi: #1b1714;
  --aka: #b0301f;
  --ao: #1f3a63;

  --serif: 'Zen Old Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', Georgia, 'Times New Roman', serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif;

  --textura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E");

  /* metade superior — sempre AKA */
  --cor-topo: var(--aka);
  --texto-topo: var(--washi);
  --pontos1: var(--washi);
  --pen-bg1: var(--washi);
  --pen-text1: var(--sumi);
  --sq-bg1: var(--sumi);
  --sq-text1: var(--washi);
  --instituicao1-bg: var(--washi);
  --instituicao1-text: var(--sumi);
  --regua1: rgba(243, 236, 221, 0.3);
  --sombra1: rgba(27, 23, 20, 0.3);

  /* metade inferior — tema padrão SHIRO */
  --cor-baixo: var(--washi);
  --texto-baixo: var(--sumi);
  --pontos2: var(--sumi);
  --pen-bg2: var(--sumi);
  --pen-text2: var(--washi);
  --sq-bg2: var(--washi);
  --sq-text2: var(--sumi);
  --instituicao2-bg: var(--sumi);
  --instituicao2-text: var(--washi);
  --regua2: rgba(27, 23, 20, 0.32);
  --sombra2: rgba(27, 23, 20, 0.28);

  --cronometro-bg: var(--washi);
  --cronometro-text: var(--sumi);
  --critico: var(--aka);
}

/* Tema alternativo: vermelho x azul */
.tema-azul {
  --cor-baixo: var(--ao);
  --texto-baixo: var(--washi);
  --pontos2: var(--washi);
  --pen-bg2: var(--washi);
  --pen-text2: var(--sumi);
  --sq-bg2: var(--sumi);
  --sq-text2: var(--washi);
  --instituicao2-bg: var(--washi);
  --instituicao2-text: var(--sumi);
  --regua2: rgba(243, 236, 221, 0.34);
  --sombra2: rgba(9, 16, 30, 0.42);
}

/* ============================= */
/*            BASE               */
/* ============================= */
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--sumi);
  font-family: var(--sans);
}

::selection {
  background: var(--aka);
  color: var(--washi);
}

.tela {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.so-ao { display: none; }
.tema-azul .so-ao { display: block; }
.tema-azul .so-shiro { display: none; }

/* ============================= */
/*       METADES DO PLACAR       */
/* ============================= */
.parteSuperior,
.parteInferior {
  height: 50%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 7vmin 36.7vmin 1fr 40vmin;
  align-items: center;
  padding-right: 3.7vmin;
  background-image: var(--textura);
  background-size: 220px 220px;
}

.parteSuperior { background-color: var(--cor-topo); }
.parteInferior { background-color: var(--cor-baixo); }

/* trilha lateral com o lado da luta */
.rail {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vmin;
}
.rail1 {
  color: var(--texto-topo);
  border-right: 1px solid var(--regua1);
}
.rail2 {
  color: var(--texto-baixo);
  border-right: 1px solid var(--regua2);
}
.rail-linha {
  width: 1px;
  height: 5.7vmin;
  background: currentColor;
  opacity: 0.4;
}
.rail-romaji {
  writing-mode: vertical-rl;
  font-size: 1.7vmin;
  font-weight: 500;
  letter-spacing: 0.42em;
}

/* pontuação geral */
.pontos1, .pontos2 {
  font-family: var(--serif);
  font-size: 29.6vmin;
  font-weight: 600;
  line-height: 0.85;
  text-align: center;
}
.pontos1 { color: var(--pontos1); }
.pontos2 { color: var(--pontos2); }

/* bloco central: nome + dojo */
.centro {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2vmin;
}

.oponent1, .oponent2 {
  width: 100%;
  box-sizing: border-box;
  padding: 0 2vmin;
  font-family: var(--serif);
  font-size: 12vmin;
  font-weight: 600;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity .15s;
}
.oponent1:hover, .oponent2:hover { opacity: 0.85; }
.oponent1 { color: var(--texto-topo); }
.oponent2 { color: var(--texto-baixo); }

.instituicao1, .instituicao2 {
  width: 36vmin;
  height: 6.2vmin;
  box-sizing: border-box;
  padding: 0 3vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8vmin;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: opacity .15s;
}
.instituicao1:hover, .instituicao2:hover { opacity: 0.85; }
.instituicao1 {
  background: var(--instituicao1-bg);
  color: var(--instituicao1-text);
  box-shadow: 0.5vmin 0.5vmin 0 var(--sombra1);
}
.instituicao2 {
  background: var(--instituicao2-bg);
  color: var(--instituicao2-text);
  box-shadow: 0.5vmin 0.5vmin 0 var(--sombra2);
}

/* ============================= */
/*      PONTOS E PENALIDADES     */
/* ============================= */
.botoes1, .botoes2 {
  display: flex;
  flex-direction: column;
  gap: 1vmin;
}

.pen-box {
  display: flex;
  align-items: center;
  gap: 1.2vmin;
  height: 6.7vmin;
  padding-right: 1.7vmin;
  border: 1px solid var(--sumi);
  white-space: nowrap;
}
.pen-box1 {
  background: var(--pen-bg1);
  color: var(--pen-text1);
  box-shadow: 0.5vmin 0.5vmin 0 var(--sombra1);
}
.pen-box2 {
  background: var(--pen-bg2);
  color: var(--pen-text2);
  box-shadow: 0.5vmin 0.5vmin 0 var(--sombra2);
}

.count {
  flex: none;
  align-self: stretch;
  width: 6.7vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 3.95vmin;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
.count1 { background: var(--sq-bg1); color: var(--sq-text1); }
.count2 { background: var(--sq-bg2); color: var(--sq-text2); }

.label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 2.35vmin;
  font-weight: 700;
  letter-spacing: 0.14em;
}


.menos, .mais {
  flex: none;
  width: 3.2vmin;
  height: 3.2vmin;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  font-size: 2.4vmin;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  transition: opacity .15s, background .15s;
}
.menos { margin-left: 0; }
.mais { margin-left: -0.5vmin; }
.menos:hover, .mais:hover { opacity: 1; }
.pen-box1 .menos:hover, .pen-box1 .mais:hover { background: rgba(27, 23, 20, 0.1); }
.pen-box2 .menos:hover, .pen-box2 .mais:hover { background: rgba(127, 127, 127, 0.22); }

/* ============================= */
/*      PINCELADA DIVISÓRIA      */
/* ============================= */
.pincelada {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 4vmin;
  z-index: 20;
  pointer-events: none;
}
.pincelada svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--sumi);
}

/* ============================= */
/*          CRONÔMETRO           */
/* ============================= */
.cronometro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 39.5vmin;
  height: 21vmin;
  box-sizing: border-box;
  background-color: var(--cronometro-bg);
  background-image: var(--textura);
  background-size: 220px 220px;
  border: 2px solid var(--sumi);
  box-shadow: 0.9vmin 0.9vmin 0 rgba(27, 23, 20, 0.38);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vmin;
  z-index: 50;
}
.cronometro::after {
  content: "";
  position: absolute;
  inset: 0.6vmin;
  border: 1px solid rgba(27, 23, 20, 0.3);
  pointer-events: none;
}


.modalidade {
  font-size: 1.4vmin;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(27, 23, 20, 0.62);
}

.tempo-display {
  font-family: var(--serif);
  font-size: 8.9vmin;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--cronometro-text);
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s;
}
.tempo-display.tempo-critico { color: var(--critico); }

.controles {
  display: flex;
  justify-content: center;
  gap: 1.5vmin;
}
.controles button {
  height: 5.4vmin;
  min-width: 11vmin;
  padding: 0 2vmin;
  font-family: var(--sans);
  font-size: 1.8vmin;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--sumi);
  cursor: pointer;
  transition: opacity .15s;
}
.controles button:hover { opacity: 0.82; }
.btn-play {
  background: transparent;
  color: var(--sumi);
}
.btn-reset {
  background: var(--sumi);
  color: var(--washi);
}

/* ============================= */
/*      BOTÃO DE CONFIGURAÇÃO    */
/* ============================= */
.config-btn {
  position: fixed;
  left: 1.7vmin;
  bottom: 1.5vmin;
  width: 3.6vmin;
  height: 3.6vmin;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--regua2);
  color: var(--texto-baixo);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity .2s;
  z-index: 999;
}
.config-btn svg {
  width: 2vmin;
  height: 2vmin;
}
.config-btn:hover { opacity: 1; }

/* modos portrait */
@media (orientation: portrait) and (max-width: 1024px) {
  .tela::after {
    content: "Gire o dispositivo para horizontal";
    position: fixed;
    inset: 0;
    background: var(--sumi);
    color: var(--washi);
    font-family: var(--serif);
    font-size: 6vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    text-align: center;
    padding: 2vmin;
  }
}
@media (min-width: 1025px) {
  .tela::after { content: none; }
}

/* ============================= */
/*        PAINÉIS / MODAIS       */
/* ============================= */
.config-modal,
.tempo-modal,
.aviso-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 13, 0.72);
  backdrop-filter: blur(3px);
  display: none;
  align-items: center;
  justify-content: center;
}
.config-modal { z-index: 1000; }
.tempo-modal, .aviso-modal { z-index: 1500; }

.config-content,
.tempo-modal-content,
.aviso-content {
  box-sizing: border-box;
  background-color: var(--washi);
  background-image: var(--textura);
  background-size: 220px 220px;
  border: 2px solid var(--sumi);
  box-shadow: 10px 10px 0 rgba(9, 7, 6, 0.5);
  color: var(--sumi);
}

.config-content {
  width: 520px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
}

/* cabeçalho comum */
.config-header,
.tempo-modal-titulo {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 78px;
  padding: 0 26px;
  border-bottom: 1px solid rgba(27, 23, 20, 0.28);
}
.config-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.22em;
}
.config-close {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(27, 23, 20, 0.45);
  font-size: 15px;
  cursor: pointer;
  transition: background .15s;
}
.config-close:hover { background: rgba(27, 23, 20, 0.1); }

.config-section {
  padding: 24px 26px 0;
}
.config-section h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(27, 23, 20, 0.68);
}
.config-section h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(27, 23, 20, 0.22);
}

.config-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 58px;
  margin-bottom: 8px;
  padding: 0 18px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid rgba(27, 23, 20, 0.4);
  color: inherit;
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.config-option:hover { background: rgba(27, 23, 20, 0.08); }
.config-option.ativo {
  background: var(--sumi);
  color: var(--washi);
  border-color: var(--sumi);
  box-shadow: 4px 4px 0 rgba(27, 23, 20, 0.28);
}
.config-option.ativo:hover { background: var(--sumi); }

.opt-nome {
  flex: 1;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.opt-meta {
  font-size: 12px;
  letter-spacing: 0.1em;
  opacity: 0.62;
}

.temas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.tema-option {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  height: auto;
  margin-bottom: 0;
  padding: 12px;
}
.tema-amostra {
  display: flex;
  flex-direction: column;
  height: 78px;
  border: 1px solid rgba(27, 23, 20, 0.4);
}
.tema-amostra i { flex: 1; }
.t-aka { background: var(--aka); }
.t-shiro { background: var(--washi); }
.t-ao { background: var(--ao); }
.tema-nome {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.tema-option.ativo {
  background: transparent;
  color: inherit;
  border-width: 2px;
  padding: 11px;
}
.tema-option.ativo:hover { background: rgba(27, 23, 20, 0.08); }
.tema-option.ativo .tema-amostra { border-color: var(--sumi); }

.config-nota {
  margin: 26px 26px 24px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(27, 23, 20, 0.55);
}

/* ============================= */
/*         FIM DE LUTA           */
/* ============================= */
.fim-luta-overlay {
  position: fixed;
  inset: 0;
  background-color: #14100e;
  background-image: var(--textura);
  background-size: 220px 220px;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.fim-luta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5vmin;
  color: var(--washi);
  text-align: center;
}

.fim-luta-titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vmin;
}
.fim-luta-texto {
  font-size: 10.8vmin;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.16em;
  color: #d4503a;
}

.fim-luta-placar {
  display: flex;
  align-items: flex-start;
  gap: 6vmin;
}

.fim-luta-lado {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vmin;
  min-width: 34vmin;
  transition: opacity .3s;
}
.fim-luta-lado.perdedor { opacity: 0.46; }

.fim-luta-side {
  display: flex;
  align-items: center;
  gap: 1.2vmin;
  height: 4.2vmin;
  padding: 0 2vmin;
  border: 1px solid rgba(243, 236, 221, 0.5);
  font-size: 1.5vmin;
  font-weight: 700;
  letter-spacing: 0.3em;
}
.fim-luta-side em {
  font-family: var(--sans);
  font-size: 1.5vmin;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.3em;
}
.lado-aka {
  background: var(--aka);
  border-color: var(--aka);
}

.fim-luta-pontos {
  font-family: var(--serif);
  font-size: 21.7vmin;
  font-weight: 600;
  line-height: 0.95;
}

.fim-luta-nome {
  font-family: var(--serif);
  font-size: 6.2vmin;
  font-weight: 600;
  line-height: 1.1;
}

.fim-luta-selo {
  position: absolute;
  top: 8vmin;
  right: 0;
  height: 4.4vmin;
  padding: 0 1.8vmin;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--aka);
  color: var(--washi);
  transform: rotate(-8deg);
  box-shadow: 0.5vmin 0.5vmin 0 rgba(9, 7, 6, 0.45);
  font-family: var(--sans);
  font-size: 1.6vmin;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1;
}
.fim-luta-lado.vencedor .fim-luta-selo { display: flex; }

.fim-luta-versus {
  font-family: var(--sans);
  font-size: 3.4vmin;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(243, 236, 221, 0.32);
  padding-top: 14.6vmin;
}

.fim-luta-dica {
  display: flex;
  align-items: center;
  gap: 1.5vmin;
  font-size: 1.9vmin;
  letter-spacing: 0.08em;
  color: rgba(243, 236, 221, 0.6);
}
.fim-luta-dica .tecla {
  padding: 0.5vmin 1.5vmin;
  border: 1px solid rgba(243, 236, 221, 0.45);
  font-size: 1.5vmin;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(243, 236, 221, 0.85);
  animation: piscar 1.6s infinite;
}

@keyframes piscar {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* ============================= */
/*     CAIXA DE TEMPO MANUAL     */
/* ============================= */
.tempo-modal-content {
  width: 440px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
}

.tempo-modal-legenda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(27, 23, 20, 0.68);
}

.tempo-input {
  width: calc(100% - 52px);
  margin: 0 26px;
  box-sizing: border-box;
  height: 96px;
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.08em;
  color: var(--sumi);
  background: rgba(255, 255, 255, 0.42);
  border: 2px solid var(--sumi);
  outline: none;
  caret-color: var(--aka);
}
.tempo-input::placeholder {
  color: rgba(27, 23, 20, 0.3);
}
.tempo-input-erro {
  border-color: var(--aka);
  animation: tremer .3s;
}

@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.tempo-modal-botoes {
  display: flex;
  gap: 14px;
  padding: 22px 26px 26px;
}
.tempo-modal-botoes button {
  flex: 1;
  height: 52px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.tempo-cancelar {
  background: transparent;
  border: 1px solid rgba(27, 23, 20, 0.45);
  color: rgba(27, 23, 20, 0.75);
}
.tempo-cancelar:hover { background: rgba(27, 23, 20, 0.08); }
.tempo-confirmar {
  background: var(--sumi);
  border: 1px solid var(--sumi);
  color: var(--washi);
  box-shadow: 4px 4px 0 rgba(27, 23, 20, 0.28);
}
.tempo-confirmar:hover { opacity: 0.85; }

/* ============================= */
/*             AVISO             */
/* ============================= */
.aviso-content {
  width: 400px;
  max-width: 92vw;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.aviso-mensagem {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.aviso-ok {
  height: 48px;
  padding: 0 44px;
  background: var(--sumi);
  border: 1px solid var(--sumi);
  color: var(--washi);
  box-shadow: 4px 4px 0 rgba(27, 23, 20, 0.28);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: opacity .15s;
}
.aviso-ok:hover { opacity: 0.85; }

/* Mesma dica do fim de luta, na versão clara: sem ela ninguém
   descobre que dá para confirmar no teclado. Reaproveita a
   animação "piscar". */
.aviso-dica {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -6px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(27, 23, 20, 0.55);
}
.aviso-dica .tecla {
  padding: 4px 10px;
  border: 1px solid rgba(27, 23, 20, 0.4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(27, 23, 20, 0.75);
  animation: piscar 1.6s infinite;
}