/* ============================================================
   VBunny Go Sticker Book
   Kid-friendly overlay. Big close button. Missing art = placeholder,
   never a broken-image icon.
   ============================================================ */

:root {
  --st-ink: #2B2B33;
  --st-paper: #FBF7EF;
  --st-paper-2: #F3ECDD;
  --st-purple: #8B43E6;
  --st-pink: #E86984;
  --st-yellow: #F0C74A;
  --st-hand: 'Caveat', cursive;
  --st-ui: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif;
}

/* ---- Sticker Book corner button ---- */
.vbgo-quest-hud {
  position: fixed;
  top: 70px;
  right: 12px;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: min(92vw, 280px);
  pointer-events: none;
}
.vbgo-quest-hud > * {
  pointer-events: auto;
}

.vbgo-quest-card {
  background: rgba(251, 247, 239, 0.96);
  border: 2.5px solid var(--st-ink);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 2px 4px 0 rgba(43, 43, 51, 0.18);
  font-family: var(--st-ui);
  color: var(--st-ink);
}
.vbgo-quest-card .qh-title {
  font-family: var(--st-hand);
  font-weight: 700;
  font-size: 18px;
  color: var(--st-purple);
  line-height: 1.1;
  margin-bottom: 2px;
}
.vbgo-quest-card .qh-body {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
}
.vbgo-quest-card.done {
  background: rgba(240, 199, 74, 0.95);
}
.vbgo-quest-card.done .qh-title {
  color: var(--st-ink);
}

.vbgo-book-btn {
  min-height: 48px;
  min-width: 48px;
  font-family: var(--st-ui);
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  background: var(--st-purple);
  border: 2.5px solid var(--st-ink);
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(43, 43, 51, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  touch-action: manipulation;
}
.vbgo-book-btn:active {
  transform: translateY(1px);
}
.vbgo-book-btn .vbgo-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--st-yellow);
  color: var(--st-ink);
  border: 2px solid var(--st-ink);
  font-size: 13px;
  font-weight: 800;
}

/* ---- Sticker book overlay ---- */
.vbgo-book-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(43, 43, 51, 0.55);
  backdrop-filter: blur(3px);
}
.vbgo-book-overlay.open {
  display: flex;
}

.vbgo-book {
  position: relative;
  width: min(960px, 100%);
  max-height: min(90svh, 820px);
  overflow: auto;
  background: var(--st-paper);
  border: 3px solid var(--st-ink);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(30, 40, 70, 0.35);
  padding: 18px 16px 22px;
  -webkit-overflow-scrolling: touch;
}

.vbgo-book-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2.5px dashed rgba(43, 43, 51, 0.35);
}
.vbgo-book-header h2 {
  font-family: var(--st-ui);
  font-weight: 800;
  font-size: clamp(22px, 4vw, 30px);
  color: var(--st-ink);
  line-height: 1.1;
}
.vbgo-book-header .vbgo-book-sub {
  font-family: var(--st-hand);
  font-size: 18px;
  color: var(--st-ink-soft, #5b5b66);
  width: 100%;
}

/* Big close — kid target */
.vbgo-book-close {
  min-width: 52px;
  min-height: 52px;
  border-radius: 50%;
  border: 2.5px solid var(--st-ink);
  background: var(--st-pink);
  color: #fff;
  font-family: var(--st-ui);
  font-weight: 800;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(43, 43, 51, 0.2);
  flex: 0 0 auto;
  touch-action: manipulation;
  line-height: 1;
}
.vbgo-book-close:active {
  transform: translateY(1px);
}

/* Sticker grid */
.vbgo-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 12px;
  padding: 4px 2px 8px;
}

.vbgo-sticker-slot {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 2.5px solid var(--st-ink);
  border-radius: 16px;
  background: var(--st-paper-2);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(43, 43, 51, 0.05) 0 2px,
    transparent 2px 9px
  );
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  box-shadow: 1px 2px 0 rgba(43, 43, 51, 0.12);
}

.vbgo-sticker-slot .vbgo-sticker-img {
  width: 78%;
  height: 68%;
  margin-top: 7%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Unearned = dark silhouette of the same art */
.vbgo-sticker-slot.unearned .vbgo-sticker-img {
  filter: brightness(0) opacity(0.38);
}

/* Earned = full color + soft pop */
.vbgo-sticker-slot.earned {
  background: #fff;
  background-image: none;
  box-shadow: 0 0 0 3px rgba(139, 67, 230, 0.18), 1px 2px 0 rgba(43, 43, 51, 0.12);
}
.vbgo-sticker-slot.earned .vbgo-sticker-img {
  filter: none;
}

/* Missing art: never show broken-image icon */
.vbgo-sticker-slot .vbgo-sticker-ph {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  font-family: var(--st-hand);
  font-weight: 700;
  font-size: 13px;
  color: rgba(43, 43, 51, 0.45);
  text-align: center;
  padding: 6px;
  line-height: 1.1;
}
.vbgo-sticker-slot.missing-art .vbgo-sticker-img {
  display: none;
}
.vbgo-sticker-slot.missing-art .vbgo-sticker-ph {
  display: flex;
}
.vbgo-sticker-slot.missing-art.earned .vbgo-sticker-ph {
  color: var(--st-purple);
}
.vbgo-sticker-slot.missing-art.earned {
  background: rgba(139, 67, 230, 0.08);
}

.vbgo-sticker-slot .vbgo-sticker-name {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 30px;
  font-family: var(--st-ui);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  color: var(--st-ink);
  background: rgba(251, 247, 239, 0.9);
  border-radius: 8px;
  padding: 1px 4px;
  line-height: 1.15;
  pointer-events: none;
}
.vbgo-sticker-slot.unearned .vbgo-sticker-name {
  opacity: 0.55;
}

.vbgo-sticker-slot .vbgo-sticker-status {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 7px;
  font-family: var(--st-ui);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: var(--st-ink);
}
.vbgo-sticker-slot.earned .vbgo-sticker-status {
  color: var(--st-purple);
}
.vbgo-sticker-slot.coming-soon .vbgo-sticker-status,
.vbgo-sticker-slot.grant-pending .vbgo-sticker-status {
  color: #686875;
}

/* Grant toast (shared feel with room-engine toast) */
.vbgo-quest-toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%) translateY(12px);
  z-index: 210;
  font-family: var(--st-ui);
  font-weight: 800;
  font-size: 16px;
  color: var(--st-ink);
  background: var(--st-yellow);
  border: 2.5px solid var(--st-ink);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 2px 4px 0 rgba(43, 43, 51, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: min(90vw, 360px);
  text-align: center;
}
.vbgo-quest-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Body scroll lock while book open */
body.vbgo-book-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  /* Mobile fix (Builder 7/16, cleared by main): the stretched bottom HUD sat
     directly on the mansion's front door, and the hero's action buttons own
     the bottom edge on touch. Compact card, top-right, floating over sky. */
  .vbgo-quest-hud {
    /* header is a single ~58px row on phones now; sit just under it,
       never over interactive chrome. Pages with taller chrome (room pages
       add a title strip) override --vbgo-hud-top. */
    top: var(--vbgo-hud-top, 70px);
    bottom: auto;
    right: 8px;
    left: auto;
    align-items: flex-end;
    max-width: 200px;
    gap: 6px;
  }
  .vbgo-quest-card {
    padding: 7px 10px;
    border-radius: 12px;
  }
  .vbgo-quest-card .qh-title {
    font-size: 15px;
  }
  .vbgo-quest-card .qh-body {
    font-size: 12px;
  }
  .vbgo-book-btn {
    min-height: 44px;
    font-size: 13px;
    padding: 8px 12px;
  }
  .vbgo-sticker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vbgo-quest-toast {
    transition: none !important;
  }
  .vbgo-book-btn:active,
  .vbgo-book-close:active {
    transform: none;
  }
}