/**
 * Layout global — JoypleGames.com
 * Carregado em todas as páginas do site principal.
 */

* {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  margin: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: auto;
}

/* Home — gradiente animado + vídeo (ver index_main.php) */
body.joyple-home {
  background: linear-gradient(
    315deg,
    rgba(101, 0, 94, 1) 3%,
    rgba(60, 132, 206, 1) 38%,
    rgba(48, 238, 226, 1) 68%,
    rgba(255, 25, 25, 1) 98%
  );
  animation: site-gradient 15s ease infinite;
  background-size: 400% 400%;
  background-attachment: fixed;
  color: #fff;
}

/* Demais páginas — fundo claro, sem vídeo */
body.joyple-page-inner {
  background: #f8f9fa;
  background-image: none;
  animation: none;
  color: #212529;
}

@keyframes site-gradient {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* Vídeo de fundo */
.video-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botões utilitários */
.skewed-button {
  transform: skewX(-18deg);
  border: 2px solid #000;
  cursor: pointer;
}

.skewed-button span {
  display: inline-block;
  transform: skewX(18deg);
}

.gradientred {
  font-family: Oswald, helvetica, arial, sans-serif;
  font-size: 15px;
  background: linear-gradient(to bottom, #f36d64 0%, #d01d10 100%);
  border: 1px solid #d01d10 !important;
  outline: 0;
  color: #fff;
  padding: 8px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.gradientgray {
  font-family: Oswald, helvetica, arial, sans-serif;
  font-size: 15px;
  background: linear-gradient(to bottom, #aaa 0%, #7e7e7e 100%);
  border: 1px solid #7e7e7e !important;
  color: #fff;
  outline: 0;
  padding: 8px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.gradientred:hover { background: #d01d10; }
.gradientgray:hover { background: #aaa; color: #fff; }

.btn-gold {
  background: linear-gradient(135deg, #c29b2c, #f4d983);
  color: #111;
  border: none;
  font-weight: 700;
}

.spin {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}