/* Estilos da página do jogo — usados na página pública e na prévia do painel */

html, body { margin: 0; padding: 0; }
body.public { background: #12101f; }

.site-root {
  --accent: #7c5cff;
  min-height: 100vh;
  container-type: inline-size;
  box-sizing: border-box;
  padding: 0 16px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
body.public .site-root { background-attachment: fixed; }
@media (hover: none) { body.public .site-root { background-attachment: scroll; } }

.site-root *, .site-root *::before, .site-root *::after { box-sizing: border-box; }

.site-inner { margin: 0 auto; padding: 1px 0; }

.sb { margin: 12px 0; }
.sb-align-left { text-align: left; }
.sb-align-center { text-align: center; }
.sb-align-right { text-align: right; }

.sb-heading { margin: 16px 0 8px; line-height: 1.15; font-weight: 700; }
.sb-heading.sb-size-sm { font-size: clamp(1.2rem, 3cqi, 1.5rem); }
.sb-heading.sb-size-md { font-size: clamp(1.5rem, 4.5cqi, 2.2rem); }
.sb-heading.sb-size-lg { font-size: clamp(1.9rem, 6cqi, 3rem); }
.sb-heading.sb-size-xl { font-size: clamp(2.3rem, 9cqi, 4.2rem); }

.sb-text { white-space: pre-line; margin: 8px 0; }
.sb-text.sb-size-sm { font-size: 0.95rem; }
.sb-text.sb-size-md { font-size: 1.1rem; }
.sb-text.sb-size-lg { font-size: 1.35rem; }
.sb-text.sb-size-xl { font-size: 1.7rem; }

.sb-image img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
.sb-image img.rounded { border-radius: 16px; }
.sb-image-empty {
  display: inline-block; padding: 40px 24px; border: 2px dashed currentColor; border-radius: 12px;
  opacity: 0.5; width: 100%;
}

.sb-button a {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff; text-decoration: none; font-weight: 700;
  border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.sb-button a:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
.sb-button a:active { transform: translateY(0); }
.sb-button a.sb-size-sm { padding: 8px 16px; font-size: 0.95rem; }
.sb-button a.sb-size-md { padding: 12px 24px; font-size: 1.05rem; }
.sb-button a.sb-size-lg { padding: 16px 34px; font-size: 1.25rem; }
.sb-button a.sb-size-xl { padding: 20px 44px; font-size: 1.5rem; }
.sb-button svg { width: 1.2em; height: 1.2em; flex: none; }
.sb-button a.no-link { opacity: 0.6; cursor: not-allowed; }

.sb-video .frame { margin: 0 auto; position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; }
.sb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sb-video .sb-image-empty { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }

.sb-divider { border: 0; border-top: 2px solid currentColor; opacity: 0.35; margin: 24px 0; }