/*
 * index-skin.css
 * Hides the captured tf2easy snapshot and exposes only our new UI.
 * The original DOM stays intact so fonts / embedded assets still load.
 */

/* Push the original Next.js render behind our overlay */
body > div.flex.flex-col.h-full {
  opacity: 0 !important;
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
}
/* Hide the original loading spinner too */
body > div.fixed.inset-0.z-50 {
  display: none !important;
}

/* ─── Base resets for our new UI ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #07060c;
  color: #e8e5f4;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::-webkit-scrollbar               { width: 5px; }
::-webkit-scrollbar-track         { background: #07060c; }
::-webkit-scrollbar-thumb         { background: rgba(139,92,246,.35); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(139,92,246,.6); }

/* ─── Keep our modals and toast on top ────────────────────────── */
.tanners-toast,
#tf-bp, #tf-create, #tf-join { z-index: 2000 !important; }