/* 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; }

/* Comentários */
.sb-comments { margin: 32px 0; text-align: left; }
.sb-comments-title { font-size: clamp(1.4rem, 4cqi, 2rem); margin: 0 0 12px; line-height: 1.2; }
.sb-comment-form {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.sb-comment-form input, .sb-comment-form textarea {
  font: inherit; font-size: 1rem; color: inherit; width: 100%; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); resize: vertical;
}
.sb-comment-form input::placeholder, .sb-comment-form textarea::placeholder { color: inherit; opacity: 0.6; }
.sb-comment-form input:focus, .sb-comment-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sb-comment-form .sb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sb-rate { display: flex; align-items: center; gap: 4px; }
.sb-rate span { margin-right: 6px; opacity: 0.85; }
.sb-rate button {
  font-size: 1.6rem; line-height: 1; padding: 2px; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: 0.35; min-width: 36px; min-height: 36px;
}
.sb-rate button.on { color: #ffc83d; opacity: 1; }
.sb-comment-send {
  align-self: flex-start; font: inherit; font-weight: 700; color: #fff; background: var(--accent);
  border: 0; border-radius: 10px; padding: 10px 20px; cursor: pointer;
}
.sb-comment-send:disabled { opacity: 0.6; cursor: default; }
.sb-comment-msg { min-height: 1.2em; font-size: 0.95rem; opacity: 0.9; }
.sb-comment-msg.error { color: #ff8a8a; }
.sb-comment-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.sb-comment { padding: 12px 16px; border-radius: 12px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.08); }
.sb-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sb-comment-head time { font-size: 0.85rem; opacity: 0.65; margin-left: auto; }
.sb-stars { color: #ffc83d; letter-spacing: 1px; }
.sb-comment p { margin: 4px 0 0; white-space: pre-line; }
.sb-comment-empty { opacity: 0.7; margin: 16px 0 0; }