/**
 * MEK RPG — design system da página inteira
 * Tokens + papel de parede estático + seções base.
 * Remodele seções uma a uma reutilizando estas classes.
 */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --mek-bg: #08080f;
  --mek-surface: #12121c;
  --mek-surface-2: #181824;
  --mek-border: rgba(201, 162, 39, 0.28);
  --mek-border-strong: rgba(201, 162, 39, 0.55);
  --mek-text: #f2ead8;
  --mek-muted: #9a8f7a;
  --mek-gold: #e8c547;
  --mek-accent: #c9a227;
  --mek-danger: #f4756a;
  --mek-success: #3dd68c;
  --mek-radius: 14px;
  --mek-radius-lg: 18px;
  --mek-font: 'Outfit', 'Segoe UI', sans-serif;
  --mek-display: 'Cinzel', Georgia, serif;
  --mek-wallpaper: url('/imagens/papel-de-parede-rpg.png');
  --mek-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

html {
  min-height: 100%;
  background-color: var(--mek-bg);
  /* Cor sólida só como fallback — a arte fica no #static-bg (img), estável no mobile */
  background-image: none;
}

body {
  font-family: var(--mek-font);
  color: var(--mek-text);
  background-color: transparent;
  background-image: none;
}

/* Papel de parede principal — camada fixa com <img> (não some no mobile) */
#static-bg,
.mek-wallpaper {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: var(--mek-bg) !important;
  background-image: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

#static-bg img,
.mek-wallpaper > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none;
}

/* Só o conteúdo da página acima do wallpaper — NÃO aplicar em sidebar/modais fixed */
#conteudo-principal,
#topo,
main,
.mek-footer {
  position: relative;
  z-index: 1;
}

/* Desliga shader antigo e controles */
.shader-background-container,
.shader-debug-controls,
.shader-blur {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Seção padrão gamificada */
.mek-section {
  position: relative;
  margin: 24px 0;
  padding: 22px 20px;
  border-radius: var(--mek-radius-lg);
  border: 1px solid var(--mek-border);
  background:
    linear-gradient(165deg, rgba(36, 30, 18, 0.88) 0%, rgba(12, 12, 18, 0.92) 100%);
  box-shadow: var(--mek-shadow);
  color: var(--mek-text);
  font-family: var(--mek-font);
}

.mek-section-title {
  margin: 0 0 8px;
  font-family: var(--mek-display);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mek-gold);
}

.mek-section-sub {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: var(--mek-muted);
  line-height: 1.45;
}

.mek-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--mek-border-strong);
  background: linear-gradient(180deg, rgba(232, 197, 71, 0.28), rgba(154, 116, 24, 0.22));
  color: var(--mek-text);
  font-family: var(--mek-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.mek-btn:hover {
  border-color: rgba(232, 197, 71, 0.75);
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.22);
  transform: translateY(-1px);
}

.mek-btn--ghost {
  background: rgba(0, 0, 0, 0.28);
  border-color: var(--mek-border);
}

.mek-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--mek-border);
  background: rgba(0, 0, 0, 0.28);
  color: var(--mek-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mek-chip--gold {
  color: #1a1408;
  border-color: rgba(232, 197, 71, 0.65);
  background: linear-gradient(165deg, #e8c547, #c9a227 55%, #8a6914);
}

/* Modal shell compartilhado (centralização) */
.mek-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  background: rgba(4, 4, 10, 0.72);
  backdrop-filter: blur(10px);
}

.regras-modal,
.install-modal,
.announcements-inbox-modal,
.announcements-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 2147483641 !important;
}

.regras-modal,
.install-modal {
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
}

.regras-modal.is-visible,
.install-modal.is-visible {
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 1 !important;
}