/*
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠤⠤⠤⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠤⠊⠉⠀⠀⠀⠀⠉⠒⢄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠋⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⢱⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣄
⠀⠀⠀⠀⢀⡀⢀⣀⠀⢈⠀⠀⠀⠀⠀⠀⢀⡤⣪⡟⠁⢰⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡞⢡⡟
⠀⠀⡐⠉⠀⠀⠀⠀⠀⠈⡆⠀⠀⠀⠀⢰⠋⣰⡟⠀⠀⡎⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⡏⠀⡟⠀
⢠⠎⠀⠀⠀⠀⠀⠀⠀⠀⠈⠁⠀⠀⡰⠁⢠⣿⣇⠄⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⡟⡠⠋⠀⠀
⡎⠀⠀⠀⠀⢀⡴⠞⠃⠉⠉⠀⢉⡹⠉⠉⣻⣿⠃⢀⣴⣶⠔⣺⣶⠀⢀⣤⡶⢊⣶⠞⠀⣠⣴⠊⣱⡆⢀⣾⡟⠋⠀⡀⠀⠀
⡇⠀⠀⠀⢠⠟⠁⠀⠀⠀⠀⢀⠎⠀⠀⣰⣯⠋⢀⣾⡟⢁⡴⡿⠁⡠⡾⡟⢀⣼⠏⢀⣴⣿⡥⠾⠋⡠⣾⠿⠀⠀⡐⠁⠀⠀
⢁⠀⠀⠀⠸⣁⠀⠀⠀⠀⡠⢁⡀⠀⡠⡼⠁⣠⢼⡿⠉⠹⠹⢁⠄⢈⢡⢀⡼⡏⠀⠇⡧⡇⠀⢀⠌⠠⡈⡇⣀⠌⠀⠀⠀⠀
⠀⠢⠀⠀⠀⠈⠂⠐⠒⠉⠀⠘⠈⣓⢥⡒⠁⠘⠉⠀⠀⠈⡱⠁⠀⠀⣁⡽⠛⠋⠀⠀⠀⠀⠉⠀⠀⠀⠉⠉⠀⠀⠀⠀⠀⠀
⠀⠀⠈⠀⠠⢀⣀⣀⡀⡀⠤⠒⠉⠀⠀⠀⠑⠐⠠⠤⠔⠂⠀⢀⡔⠉⠠⢡⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢈⠠⠀⡠⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
*/

@font-face {
  font-family: "m5x7";
  src: url("../../fonts/m5x7.ttf") format("truetype");
}

@font-face {
  font-family: "xxQueen-basic";
  src: url("../../fonts/xxQueen-basic.otf") format("opentype");
}

@font-face {
  font-family: "PeanutMoney";
  src: url("../../fonts/PeanutMoney.ttf") format("truetype");
}

@font-face {
  font-family: "KolquatFunkyBitm";
  src: url("../../fonts/KolquatFunkyBitm.ttf") format("truetype");
}

:root {
  --hot-pink: #b973ff;
  --red: #a32727;
  --soft-pink: rgba(243, 179, 179, 0.9);
  --soft-yellow: #ffefbf;
  --soft-green: #70f0d0;

  --main-bg: rgba(255, 255, 191, 0.5);
  --main-border: #fca7c3;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
  font-family: "m5x7";
  overflow-x: hidden;
}

figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  padding: 20px 0 10px;
  background-attachment: fixed;
  background-size: auto;
}

/* camada de glitter; --sparkle-opacity troca o 0.5 padrão por elemento */
.sparkle-overlay {
  position: relative;
}

.sparkle-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/backgrounds/background-005.webp");
  background-repeat: repeat;
  z-index: 0;
  pointer-events: none;
  opacity: var(--sparkle-opacity, 0.5);
}

a {
  text-decoration: none;
}

a:hover {
  color: var(--hot-pink);
}

main {
  position: relative;
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* mesmo espaço que fica entre o footer e a borda de baixo do .container
     (padding de baixo + borda de 1.8px) */
  margin: calc(10px + 1.8px) auto 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: var(--red) var(--soft-yellow);
  scrollbar-width: thin;
  font-family: "m5x7";
  font-size: 24px;
  font-weight: lighter;
  color: var(--hot-pink);
  border: 2.5px inset var(--main-border);
  text-align: center;
  background-color: var(--main-bg);
  background-repeat: repeat;
  background-attachment: local;

  /* no celular vai de ponta a ponta, passando o padding do .container */
  @media (max-width: 599px) {
    width: calc(100% + 40px);
    margin-top: calc(8px + 1.8px);
    margin-left: -20px;
    margin-right: -20px;
    border-left: none;
    border-right: none;
  }
}

main p {
  padding: 0 10px;
  /* fixo pra linhas com ✧ (fonte fallback) não ficarem mais altas */
  line-height: 22px;
  overflow-wrap: break-word;
}

/* sublinhado pontilhado desenhado com gradiente: o text-decoration dotted
   sai grosso/torto no Safari do iPhone */
.Main__ChangelogToggle {
  padding-bottom: 1px;
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, currentColor 45%, transparent) 1px,
    transparent 1px
  );
  background-size: 3px 1px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}

/* home: intro e changelog trocam de lugar com a mesma altura
   (changelog-toggle.js), então o botão não se mexe */
.Main__Intro,
.Main__Changelog {
  width: 100%;
  height: 106px;
  /* espaço pro brilho do texto não ser cortado pelo scroll */
  padding-top: 8px;
  padding-bottom: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: var(--red) var(--soft-yellow);
  scrollbar-width: thin;
}

.Main__Changelog {
  width: 45%;
  text-align: left;
  background-color: color-mix(in srgb, var(--soft-pink) 75%, transparent);

  @media (max-width: 599px) {
    width: 90%;
  }

  /* toque (iPhone não mostra scrollbar fixa nem aceita cor): barra falsa
     pintada no fundo, que fica parado; o changelog-toggle.js move o thumb */
  @media (hover: none) and (pointer: coarse) {
    padding-right: 8px;
    background-image:
      linear-gradient(var(--red), var(--red)),
      linear-gradient(var(--soft-yellow), var(--soft-yellow));
    background-size:
      4px var(--bar-thumb-h, 0px),
      4px var(--bar-track-h, 0px);
    background-position:
      right 0 top var(--bar-thumb-top, 0px),
      right 0 top 0;
    background-repeat: no-repeat;
  }
}

.Main__ChangelogEntry {
  padding: 0 10px;
  margin-bottom: 6px;
  color: #fff;
  text-shadow: none;
}

.Main__ChangelogEntry:last-child {
  margin-bottom: 0;
}

.Main__ChangelogDeco {
  color: #5ad1ff;
  font-size: 14px;
  opacity: 0.85;
}

.container {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background-color: var(--soft-pink);
  border: 1.8px outset var(--soft-yellow);
  display: flex;
  flex-direction: column;
  padding: 8px 20px 8px;

  @media (min-width: 600px) {
    padding: 8px 50px 10px;
  }

  @media (max-width: 599px) {
    margin-top: 40px;
  }
}

/* janela baixa no desktop: o container para na altura da janela e só o main
   encolhe (350px → mín. 240px). 68px = padding do body + .SideBanner da home */
@media (min-width: 600px) {
  .container {
    max-height: calc(100vh - 68px);
  }

  .container > * {
    flex-shrink: 0;
  }

  .container > main {
    height: auto;
    flex: 0 1 350px;
    min-height: 240px;
  }
}

.container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/backgrounds/background-004.webp");
  background-repeat: repeat;
  z-index: 0;
  opacity: 0.25;
  pointer-events: none;
}

/* faixas laterais (side-border.php), ligadas por tema com --side-border-image
   + --side-border-ratio (largura / altura da imagem).
   Opcionais: --side-border-fill (recolore, recortado pela máscara),
   --side-border-blend ("color" mantém o sombreado), --side-border-filter,
   --side-border-opacity.
   Brilho: coloque direto no PNG (drop-shadow/blur + mask variam entre navegadores) */
.container > .SideBorder {
  position: absolute;
  /* sobe até o topo, passando os 20px de padding do body */
  top: -20px;
  height: calc(100% + 20px);
  aspect-ratio: var(--side-border-ratio, 1 / 1);
  background-image:
    var(--side-border-fill, none), var(--side-border-image, none);
  background-blend-mode: var(--side-border-blend, normal);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--side-border-image, none);
  mask-image: var(--side-border-image, none);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  filter: var(--side-border-filter, none);
  opacity: var(--side-border-opacity, 1);
  pointer-events: none;

  /* + os 40px de margin-top do container no celular */
  @media (max-width: 599px) {
    top: -60px;
    height: calc(100% + 60px);
  }
}

.SideBorder--left {
  left: 0;
  transform: translateX(-50%);
}

.SideBorder--right {
  right: 0;
  transform: translateX(50%) scaleX(-1);
}

/* marquee de "anúncio" falso embaixo do container, só na home (side-banner.php) */
.container > .SideBanner {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 48px;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);

  @media (min-width: 1300px), (max-width: 599px) {
    display: flex;
  }
}

.SideBanner__track {
  font-family: "m5x7";
  font-size: 20px;
  letter-spacing: 3px;
  white-space: nowrap;
  background: linear-gradient(90deg, #ff5ec4, #5ad1ff, #39ff14, #ff5ec4);
  /* tamanho fixo pro gradiente repetir ao longo da faixa comprida */
  background-size: 400px 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sideBannerScroll linear infinite;
}

.SideBanner__img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  vertical-align: middle;
}

@keyframes sideBannerScroll {
  to {
    transform: translateX(-50%);
  }
}

.container > *,
main > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 599px) {
  .Main__Deco {
    margin: 0 2px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0.85;
  }
}

/* cursor JS (cursor.js); html também, pra área vazia abaixo de páginas curtas */
html,
body,
a,
button,
select {
  cursor: none;
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 10000;
}

.cursor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

::selection {
  background-color: var(--hot-pink);
  color: #fff;
}

/* fica no HTML, mas sempre escondido */
.refresh-btn {
  position: relative;
  z-index: 1;
  overflow: hidden;
  font-family: "m5x7";
  font-size: 18px;
  color: rgb(78, 78, 78);
  background-color: var(--soft-pink);
  border: 1px outset var(--soft-yellow);
  padding: 6px 16px;
  display: block;
  width: max-content;
  margin: 0 auto 0 max(0px, calc((100% - 1000px) / 2));
  visibility: hidden;

  @media (max-width: 599px) {
    display: none;
  }
}