/* =========================================================================
   MOLDURA DO THE MINDGAMER — para as telas de jogo

   Tudo que fica EM VOLTA da mesa: painéis, cabeçalhos de painel, botões,
   botões de ícone, diálogos e aviso. A mesa em si (cartas, fundo, cores do
   jogo) é de cada jogo e mora no CSS dele.

   Esta é a mesma linguagem visual de The Mindgamer/painel.css. Enquanto os
   jogos e o hub não são servidos juntos, cada jogo carrega uma cópia deste
   arquivo: alterou aqui, alterou nos dois jogos.

   Cada jogo pode sobrescrever as cores da moldura no :root do CSS dele:
     --game-accent        destaque (botão principal, estrela, número ativo)
     --mg-primary-base    cor escura com que o destaque é misturado no botão
     --ink-0..3           tinta do texto, do mais claro ao mais apagado
     --mg-line, --mg-line-hi, --mg-rule, --mg-frame   linhas
     --mg-panel, --mg-surface, --mg-dialog            fundos
   A forma, a tipografia e o espaçamento não mudam: é isso que faz os jogos
   parecerem um lugar só. A temperatura da cor acompanha a mesa de cada um.

   ESCALA: --u vale 1px de uma tela de 1920×1080 e acompanha o lado que limita
   a viewport. Textos usam max(Npx, …) como piso, pra continuarem legíveis
   num notebook 1366×768, onde 1u vale só 0,71px.
   ========================================================================= */

:root {
  --u: min(calc(100vw / 1920), calc(100dvh / 1080));

  --ink-0: #f1f4ff;
  --ink-1: #d5ddf7;
  --ink-2: #a9b6de;
  --ink-3: #7d8bb6;

  --mg-line:    rgb(160 185 255 / 0.24);
  --mg-line-hi: rgb(175 200 255 / 0.62);
  --mg-rule:    rgb(170 195 255 / 0.45);
  --mg-frame:   rgb(180 200 255 / 0.06);
  --mg-panel:   linear-gradient(180deg, rgb(18 26 54 / 0.86), rgb(7 11 26 / 0.93));
  --mg-surface: linear-gradient(180deg, rgb(30 44 98 / 0.55), rgb(12 18 44 / 0.75));
  --mg-dialog:  linear-gradient(180deg, rgb(22 30 64), rgb(9 12 30));

  --font-brand: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;

  --game-accent: #86a8ff;
  --mg-primary-base: #0a1230;
  --mg-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ================================================================ painel ===== */

.mg-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mg-line);
  border-radius: calc(12 * var(--u));
  background: var(--mg-panel);
  box-shadow: 0 calc(14 * var(--u)) calc(34 * var(--u)) rgb(0 3 10 / 0.4);
}

/* moldura interna fina */
.mg-panel::after {
  content: "";
  position: absolute;
  inset: calc(6 * var(--u));
  border: 1px solid var(--mg-frame);
  border-radius: calc(8 * var(--u));
  pointer-events: none;
}

.mg-panel__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: max(40px, calc(58 * var(--u)));
  padding: 0 calc(22 * var(--u));
}

/* a estrela de 4 pontas, ornamento da casa */
.mg-panel__head::before {
  content: "";
  flex: none;
  width: max(10px, calc(14 * var(--u)));
  height: max(10px, calc(14 * var(--u)));
  background: color-mix(in srgb, var(--game-accent) 70%, white);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

.mg-panel__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: max(12px, calc(16 * var(--u)));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-1);
}

.mg-panel__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--mg-rule), transparent 85%);
}

/* ================================================================ botões ===== */

.mg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  min-height: max(38px, calc(54 * var(--u)));
  padding: 0 calc(26 * var(--u));
  border: 1px solid var(--mg-line);
  border-radius: calc(8 * var(--u));
  background: var(--mg-surface);
  color: var(--ink-1);
  font-family: var(--font-serif);
  font-size: max(12px, calc(16 * var(--u)));
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s var(--mg-ease), color .18s var(--mg-ease);
}

.mg-btn:hover:not(:disabled),
.mg-btn:focus-visible { border-color: var(--mg-line-hi); color: var(--ink-0); }

.mg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.mg-btn--primary {
  border-color: color-mix(in srgb, var(--game-accent) 80%, white 10%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--game-accent) 58%, var(--mg-primary-base)),
    color-mix(in srgb, var(--game-accent) 30%, var(--mg-primary-base)));
  color: #fff;
}

.mg-btn--primary:hover:not(:disabled),
.mg-btn--primary:focus-visible { border-color: color-mix(in srgb, var(--game-accent) 50%, white); color: #fff; }

.mg-btn--danger { border-color: rgb(217 122 133 / 0.5); background: rgb(60 20 32 / 0.4); color: #eba5ad; }

.mg-btn--danger:hover:not(:disabled),
.mg-btn--danger:focus-visible { border-color: rgb(236 158 168 / 0.95); color: #f8cdd2; }

.mg-iconbtn {
  display: grid;
  place-items: center;
  width: max(36px, calc(52 * var(--u)));
  height: max(36px, calc(52 * var(--u)));
  padding: 0;
  border: 1px solid var(--mg-line);
  border-radius: calc(10 * var(--u));
  background: var(--mg-surface);
  color: var(--ink-1);
  cursor: pointer;
  transition: border-color .18s var(--mg-ease), color .18s var(--mg-ease);
}

.mg-iconbtn svg { width: 46%; height: 46%; }

.mg-iconbtn:hover,
.mg-iconbtn:focus-visible { border-color: var(--mg-line-hi); color: var(--ink-0); }

/* =============================================================== diálogo ===== */

.mg-dialog {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 30px 32px 28px;
  border: 1px solid var(--mg-line-hi);
  border-radius: 14px;
  background: var(--mg-dialog);
  color: var(--ink-0);
  font-family: var(--font-serif);
  box-shadow: 0 28px 70px rgb(0 2 8 / 0.7);
}

.mg-dialog::backdrop { background: rgb(2 4 12 / 0.72); backdrop-filter: blur(4px); }

.mg-dialog__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; }

.mg-dialog__kicker {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mg-dialog h2 {
  margin: 10px 0 14px;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
}

.mg-dialog p,
.mg-dialog li { font-size: 17px; line-height: 1.55; color: var(--ink-2); }

/* Ações do diálogo em grade de colunas iguais.

   Com flex-wrap cada botão ficava do tamanho do próprio texto: as larguras
   saíam irregulares e a linha quebrava num lugar diferente em cada monitor.
   Em grade, os botões têm sempre a mesma largura e a quebra é a mesma sempre.
   A ação destrutiva sai da dupla e vai sozinha para a linha de baixo. */
.mg-dialog__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}

.mg-dialog__actions > .mg-btn {
  width: 100%;
  padding-inline: calc(14 * var(--u));
  /* rótulo comprido ("Voltar ao The Mindgamer") quebra linha em vez de vazar
     da caixa; e o espaçamento é um pouco menor que o dos botões soltos,
     porque aqui a largura é meia coluna */
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.12em;
}

/* o botão que sobra sozinho na última linha ocupa a linha inteira — seja ele
   a ação destrutiva ou não. Antes isso dependia da classe --danger, e dentro
   do hub o botão de sair perde essa classe: ficava espremido em meia coluna. */
.mg-dialog__actions > .mg-btn:only-child,
.mg-dialog__actions > .mg-btn:last-child:nth-child(odd),
.mg-dialog__actions > .mg-btn--danger { grid-column: 1 / -1; }

.mg-dialog__actions > .mg-btn--danger {
  margin-top: 4px;
  padding-top: 0;
  min-height: max(34px, calc(46 * var(--u)));
  border-color: rgb(217 122 133 / 0.32);
  background: transparent;
}

@media (max-width: 460px) {
  .mg-dialog__actions { grid-template-columns: 1fr; }
}

/* ================================================================= aviso ===== */

.mg-toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 28px;
  translate: -50% 0;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 13px 20px;
  border: 1px solid rgb(217 122 133 / 0.5);
  border-radius: 10px;
  background: rgb(36 14 26 / 0.96);
  box-shadow: 0 14px 34px rgb(0 2 8 / 0.6);
  color: #f3bcc4;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
}

.mg-toast.success { border-color: rgb(126 210 160 / 0.45); background: rgb(14 44 32 / 0.96); color: #d6f5e3; }

/* ================================================================== som ===== */
/* Botão de mudo da barra de topo e o painel "Som deste jogo". Os dois são
   montados por mindgamer-som.js; aqui só a aparência, igual nos dois jogos. */

.mg-som__mudo .mg-som__corte { display: none; }
.mg-som__mudo[aria-pressed="true"] { color: var(--ink-3); }
.mg-som__mudo[aria-pressed="true"] .mg-som__onda { display: none; }
.mg-som__mudo[aria-pressed="true"] .mg-som__corte { display: inline; }

.mg-som { display: grid; gap: 10px; }

/* com dois nomes de classe para vencer as regras genéricas de texto do diálogo */
.mg-som .mg-som__titulo {
  margin: 0;
  font-size: max(12px, calc(14 * var(--u)));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mg-som__linha {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) 2.4em;
  align-items: center;
  gap: 12px;
  font-size: max(13px, calc(16 * var(--u)));
  color: var(--ink-1);
}

.mg-som__linha input[type="range"] { width: 100%; margin: 0; accent-color: var(--game-accent); }

.mg-som__linha output {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.mg-som__chave { justify-self: start; width: 18px; height: 18px; margin: 0; accent-color: var(--game-accent); }

.mg-som .mg-som__nota {
  margin: 0;
  font-size: max(12px, calc(14 * var(--u)));
  line-height: 1.45;
  color: var(--ink-3);
}

.mg-som__padrao {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--game-accent);
  font: inherit;
  font-size: max(12px, calc(14 * var(--u)));
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ================================================================= 1v1 ===== */
/* Relógio da jogada, aviso de queda, chat entre amigos e a pergunta antes de
   sair. Montados por mindgamer-mesa.js. Cada jogo diz onde o relógio fica
   com --mg-relogio-topo (logo abaixo da própria barra de topo). */

.mg-relogio,
.mg-queda {
  position: fixed;
  z-index: 40;
  right: var(--mg-relogio-direita, 16px);
  border: 1px solid var(--mg-line-hi);
  background: var(--mg-dialog);
  box-shadow: 0 10px 28px rgb(0 3 10 / 0.55);
  font-family: var(--font-serif);
  pointer-events: none;
}

.mg-relogio[hidden],
.mg-queda[hidden],
.mg-ausente[hidden],
.mg-amizade[hidden],
.mg-amizade__botao[hidden] { display: none; }

.mg-relogio {
  top: var(--mg-relogio-topo, 96px);
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.mg-relogio__quem {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.mg-relogio__tempo {
  min-width: 2.6em;
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-1);
}

.mg-relogio.is-minha { border-color: color-mix(in srgb, var(--game-accent) 70%, white 10%); }
.mg-relogio.is-minha .mg-relogio__quem,
.mg-relogio.is-minha .mg-relogio__tempo { color: var(--ink-0); }
.mg-relogio.is-urgente .mg-relogio__tempo { color: #f0a5ae; }
.mg-relogio.is-urgente { border-color: rgb(217 122 133 / 0.8); }

.mg-queda {
  top: calc(var(--mg-relogio-topo, 96px) + 50px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  width: min(380px, calc(100vw - 32px));
  padding: 12px 16px;
  border-color: rgb(217 170 122 / 0.7);
  border-radius: 12px;
}

.mg-queda__roda {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  border: 2px solid rgb(240 210 170 / 0.25);
  border-top-color: #f0d2aa;
  border-radius: 50%;
  animation: mg-gira 1s linear infinite;
}

.mg-queda__titulo {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--ink-0);
}

.mg-queda__texto {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-2);
}

@keyframes mg-gira { to { rotate: 1turn; } }

.mg-amizade {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--mg-line);
  border-radius: 10px;
  background: var(--mg-surface);
}

.mg-amizade__texto {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-1);
}

.mg-amizade .mg-btn { width: 100%; min-width: 0; white-space: normal; }

.mg-sair__perder { color: #eba5ad; }

/* estourou o tempo: no meio da mesa, porque é com você e tem prazo */
.mg-ausente {
  position: fixed;
  z-index: 45;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  padding: 20px 22px;
  border: 1px solid rgb(217 170 122 / 0.8);
  border-radius: 14px;
  background: var(--mg-dialog);
  box-shadow: 0 24px 60px rgb(0 2 8 / 0.7);
  font-family: var(--font-serif);
  text-align: center;
}

.mg-ausente__titulo {
  margin: 0;
  font-size: 22px;
  color: var(--ink-0);
}

.mg-ausente__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.mg-ausente__botao { width: 100%; }

@media (max-width: 560px) {
  .mg-relogio { padding: 6px 13px; }
  .mg-relogio__quem { font-size: 12px; }
  .mg-relogio__tempo { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-btn, .mg-iconbtn { transition: none; }
  .mg-queda__roda { animation-duration: 3s; }
}

/* No site (html.mg-site, marcado pelo mindgamer-mesa.js) só existe jogar
   contra a IA do site ou 1v1. Some o que é do jogo avulso:
   - o painel de modelo por API: o servidor do site recusa esse modo, e não
     faz sentido pedir a chave de API de ninguém numa função que não existe;
   - a semente: quem escolhe a semente sabe as cartas e repete a mão que já
     ganhou (o servidor do site também a ignora). */
.mg-site details:has(#api-key),
.mg-site .field:has(> #seed),
.mg-site label[for="seed"],
.mg-site #seed {
  display: none;
}