/* =========================================================================
   TEMA MASTER — página em volta do jogo no padrão da imagem master
   (gibi anos 90: contorno preto grosso, sombra dura, roxo/magenta/amarelo)
   ========================================================================= */

:root {
  --ms-tinta: #18181b;
  --ms-roxo: #6d28d9;
  --ms-roxo-escuro: #2e1065;
  --ms-magenta: #db2777;
  --ms-amarelo: #facc15;
  --ms-verde: #22c55e;
  --ms-ciano: #22d3ee;
  --ms-vermelho: #dc2626;
}

body.tema-master {
  background-color: #1a0933;
  background-image:
    radial-gradient(rgba(219, 39, 119, 0.18) 1.4px, transparent 1.6px),
    linear-gradient(180deg, #2e1065 0%, #1a0933 55%, #0f0520 100%);
  background-size: 9px 9px, 100% 100%;
  background-attachment: fixed;
  color: #fef9c3;
  font-family: "Bungee", "Arial Black", Impact, sans-serif;
}

/* Painéis em quadro de gibi */
.ms-painel {
  background: var(--ms-roxo-escuro);
  border: 4px solid var(--ms-tinta);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ms-tinta);
}

/* Logo */
.ms-logo {
  font-family: "Bungee", "Arial Black", sans-serif;
  font-size: clamp(20px, 3.4vw, 34px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ms-vermelho);
  -webkit-text-stroke: 2px var(--ms-tinta);
  text-shadow: 3px 3px 0 var(--ms-tinta);
}
.ms-logo span { color: var(--ms-verde); }
.ms-sublogo {
  font-family: "Press Start 2P", monospace;
  font-size: 9px;
  color: var(--ms-amarelo);
  margin-top: 4px;
}

/* Botões de fliperama */
.ms-botao {
  font-family: "Bungee", "Arial Black", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  border: 3px solid var(--ms-tinta);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ms-tinta);
  padding: 4px 10px;
  color: var(--ms-tinta);
  background: var(--ms-amarelo);
  transition: transform 0.06s, box-shadow 0.06s;
}
.ms-botao:hover { filter: brightness(1.08); }
.ms-botao:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ms-tinta); }
.ms-botao.ms-roxo { background: #a78bfa; }
.ms-botao.ms-ciano { background: var(--ms-ciano); }
.ms-botao.ms-magenta { background: #f472b6; }
.ms-botao.ms-verde { background: #4ade80; }
.ms-botao.ms-vermelho { background: #f87171; }
.ms-botao.ms-cinza { background: #d4d4d8; }

/* Menu de bastidores */
.ms-bastidores summary { list-style: none; cursor: pointer; }
.ms-bastidores summary::-webkit-details-marker { display: none; }
.ms-bastidores[open] .ms-bastidores-menu { display: flex; }
.ms-bastidores-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  min-width: 190px;
}

/* Gabinete do fliperama em volta do canvas */
#arcade-cabinet.ms-gabinete {
  border: 6px solid var(--ms-tinta) !important;
  border-radius: 18px !important;
  box-shadow: 0 0 0 6px var(--ms-roxo), 8px 8px 0 6px var(--ms-tinta) !important;
}

/* Seleção de personagens */
#roster-grid button {
  font-family: "Bungee", "Arial Black", sans-serif;
  background: #4c1d95 !important;
  border: 3px solid var(--ms-tinta) !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 var(--ms-tinta);
}
#roster-grid button.ring-red-500\/50 { background: #9f1239 !important; outline: 3px solid var(--ms-amarelo); }
#roster-grid button.ring-cyan-400\/50 { background: #155e75 !important; outline: 3px solid var(--ms-ciano); }
#roster-grid button .text-slate-400 { color: #e9d5ff !important; font-family: system-ui, sans-serif; font-weight: 700; }
#roster-grid canvas { image-rendering: auto; }
#roster-grid .w-10.h-10 { width: 3.25rem; height: 3.25rem; border: 3px solid var(--ms-tinta); background: #f472b6; }

@media (max-width: 560px) {
  #roster-grid button > div { flex-direction: column; align-items: center; text-align: center; }
  #roster-grid button .text-slate-400 { display: none; }
  #roster-grid button .min-w-0 > div:first-child { justify-content: center; gap: 4px; }
}

/* Botões de toque / ação embaixo do jogo */
.ms-controles .touch-btn {
  font-family: "Bungee", "Arial Black", sans-serif !important;
  border: 3px solid var(--ms-tinta) !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 var(--ms-tinta) !important;
}
.ms-controles .touch-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ms-tinta) !important; }
.ms-controles .touch-btn span { font-family: system-ui, sans-serif; font-weight: 800; font-size: 10px; }
.ms-dicas { font-family: system-ui, sans-serif; color: #e9d5ff; }
.ms-dicas b { color: var(--ms-amarelo); }
.ms-dicas .ms-titulo { font-family: "Bungee", sans-serif; color: var(--ms-amarelo); font-size: 12px; }

/* Tela de fim de luta */
#post-match-modal.ms-fim { background: rgba(26, 9, 51, 0.9) !important; }
#post-match-modal.ms-fim #post-subtitle { font-family: "Press Start 2P", monospace; font-size: 10px; color: var(--ms-amarelo) !important; }
#post-match-modal.ms-fim #post-winner-title {
  font-family: "Bungee", "Arial Black", sans-serif;
  font-size: clamp(24px, 4.2vw, 42px);
  color: var(--ms-amarelo) !important;
  -webkit-text-stroke: 2px var(--ms-tinta);
  text-shadow: 4px 4px 0 var(--ms-magenta);
  transform: rotate(-2deg);
}
#post-match-modal.ms-fim #post-quote { font-family: system-ui, sans-serif; color: #fde68a !important; font-weight: 700; }
#post-match-modal.ms-fim .ms-segredo {
  background: #fef3c7 !important;
  color: var(--ms-tinta);
  border: 3px solid var(--ms-tinta) !important;
  box-shadow: 4px 4px 0 var(--ms-tinta);
}
#post-match-modal.ms-fim .ms-segredo div { color: var(--ms-tinta) !important; font-family: system-ui, sans-serif; font-weight: 700; }
#post-match-modal.ms-fim .ms-segredo div:first-child { font-family: "Bungee", sans-serif; color: var(--ms-vermelho) !important; }

/* Modais de bastidores com moldura de gibi */
#telemetry-modal > div, #sprite-studio-modal > div, #album-modal > div {
  border: 4px solid var(--ms-tinta) !important;
  box-shadow: 6px 6px 0 var(--ms-tinta);
}

#achievement-toast { font-family: "Bungee", sans-serif; box-shadow: 5px 5px 0 var(--ms-tinta); }