.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.glass-card {
  backdrop-filter: blur(12px);
  background: rgba(18, 20, 22, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.grain,
.grainy-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
}

.vein-divider {
  background: linear-gradient(90deg, transparent, #dfc482, transparent);
  height: 2px;
  width: 100%;
}

.gem-shape {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.wobble-hover:hover {
  transform: rotate(2deg) scale(1.02);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mining-glow {
  filter: drop-shadow(0 0 8px rgba(223, 196, 130, 0.4));
}

.success-glow {
  border: 2px solid #a2cfcf;
  box-shadow: 0 0 15px rgba(162, 207, 207, 0.5);
}

.memory-scatter > div:nth-child(odd) {
  transform: rotate(-3deg);
}
.memory-scatter > div:nth-child(even) {
  transform: rotate(2deg);
}
.memory-scatter > div:nth-child(3n) {
  transform: rotate(4deg) translateY(10px);
}
.memory-scatter > div:hover {
  transform: rotate(0deg) scale(1.05);
  z-index: 50;
}

.starfield {
  background: radial-gradient(circle at center, #1a1c1e 0%, #0c0e10 100%);
  position: relative;
  overflow: hidden;
}

.starfield::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1px 1px at 10% 10%, #fff 100%, transparent),
    radial-gradient(1px 1px at 20% 50%, #dfc482 100%, transparent),
    radial-gradient(2px 2px at 40% 80%, #fff 100%, transparent),
    radial-gradient(1px 1px at 60% 20%, #f6b7b7 100%, transparent),
    radial-gradient(2px 2px at 80% 40%, #fff 100%, transparent);
  background-repeat: repeat;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

/* Vault: stars behind content without covering UI */
.vault-starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, #1a1c1e 0%, #0c0e10 100%);
  overflow: hidden;
}

.vault-starfield::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(1px 1px at 10% 10%, rgba(255, 255, 255, 0.35) 100%, transparent),
    radial-gradient(1px 1px at 22% 48%, rgba(223, 196, 130, 0.45) 100%, transparent),
    radial-gradient(2px 2px at 42% 78%, rgba(255, 255, 255, 0.25) 100%, transparent),
    radial-gradient(1px 1px at 62% 22%, rgba(246, 183, 183, 0.35) 100%, transparent),
    radial-gradient(2px 2px at 82% 42%, rgba(255, 255, 255, 0.2) 100%, transparent);
  background-repeat: repeat;
  opacity: 0.35;
}

.bg-video-dim {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.35) contrast(1.1);
}

.admin-tab-active {
  background: rgba(234, 179, 8, 0.2);
  color: rgb(254 243 199);
  border-left: 4px solid rgb(234 179 8);
}

.admin-tab:not(.admin-tab-active) {
  color: rgb(148 163 184);
}

/* Global, subtle scrollbars for long content */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
}
/* Hide YouTube interactions/UI feel */
.video-background iframe {
  pointer-events: none;
}

/* Optional: make iframe fully cover container */
.video-background {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: none;
}