/* TBShare popup — tavern-craft styling for the completion share popup. */
.tbs-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(3, 2, 6, 0.78); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto;
}
.tbs-card {
  position: relative; width: min(520px, 94vw);
  background: linear-gradient(165deg, #171126, #0a0812 70%);
  border: 2px solid #c4902a; border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(196, 144, 42, 0.18), 0 24px 60px rgba(0, 0, 0, 0.7);
  color: #d0bc98; font-family: 'IM Fell English', Georgia, serif;
  padding: 26px 22px 20px; text-align: center;
  animation: tbs-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tbs-pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tbs-close {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(196, 144, 42, 0.5); background: rgba(196, 144, 42, 0.08);
  color: #e6b040; font-size: 1.05rem; cursor: pointer;
}
.tbs-close:hover { background: rgba(196, 144, 42, 0.22); }
.tbs-sparkle { font-size: 2rem; line-height: 1; }
.tbs-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif; font-weight: 700;
  color: #e6b040; font-size: 1.55rem; margin: 6px 0 2px; letter-spacing: 0.02em;
}
.tbs-sub { margin: 0 0 14px; font-style: italic; color: #bfae8e; }
.tbs-preview {
  background: #060410; border: 1px solid rgba(196, 144, 42, 0.35); border-radius: 10px;
  padding: 10px; min-height: 120px; display: flex; align-items: center; justify-content: center;
}
.tbs-img { max-width: 100%; max-height: 46vh; border-radius: 6px; display: block; }
.tbs-loading { color: #7a6f90; font-style: italic; margin: 10px 0; }
.tbs-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
.tbs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 18px; border-radius: 9px;
  border: 1px solid #8a6018; background: rgba(196, 144, 42, 0.1);
  color: #e8d9b8; font-family: 'Cinzel', serif; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; cursor: pointer;
}
.tbs-btn:hover { background: rgba(196, 144, 42, 0.24); }
.tbs-btn-main { background: linear-gradient(160deg, #e6b040, #c4902a); color: #241703; border-color: #e6b040; }
.tbs-btn-main:hover { background: linear-gradient(160deg, #ffd454, #e6b040); }
.tbs-btn-soc { font-size: 0.85rem; min-height: 44px; padding: 8px 13px; }
.tbs-note { min-height: 1.2em; font-size: 0.9rem; color: #ffd454; margin: 10px 0 0; }
.tbs-btn:focus-visible, .tbs-close:focus-visible {
  outline: 3px solid #ffd454; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .tbs-card { animation: none; }
}